Vue-router前端路由(2)

Vue-router全局导航守卫：

为什么使用导航守卫：（修改网页标题）

• 网页标题是通过title来显示的，但SPA只有一个固定的HTML，切换组件无法修改title
• 但我们可以通过JavaScript来修改title的内容：document.title
• 这时就需要用到我们的导航守卫来实现这个动态修改

router.beforeEach函数的使用：

router.beforeEach()本身需要一个参数，从源码中可知该参数是一个函数

beforeEach(guard: NavigationGuard): Function

从源码中解读该guard函数本身同样包含三个参数（to, from, next）

export type NavigationGuard<V extends Vue = Vue> = (
  to: Route,
  from: Route,
  next: NavigationGuardNext<V>
) => any

同时参数next本身又是一个函数：

export type NavigationGuardNext<V extends Vue = Vue> = (
  to?: RawLocation | false | ((vm: V) => any) | void
) => void

另两个参数to和from的含义就是：从我们的from跳转到to，在这个跳转过程中便可实行我们改变title的操作。

to:即将要进入的目标的路由对象

from:当前导航即将要离开的路由对象

next:调用该方法后，才能进入下一个钩子

我们要做的是将页面title赋值为需要跳转到的界面to的title，然而to里面没有title这个属性，这时候我们再回到源码，发现to是一个route类型，而route类型就是router对象中的一个个路由映射，所以我们可以给每个路由映射里加上一个meta(元数据)属性，里面给上页面组件title

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

然而当存在路由嵌套时，我们的to就会出现问题，因为嵌套的子路由并没有给它meta元数据，这时除了给子路由加上meta以外，还有另一个方法取得主路由的meta。

从下图可以发现，在当前to对象中meta属性是空的，但是在matched(对象数组)属性下的第一个对象matched[0]中，保存着我们主路由的meta，所以我们可以修改一下代码。来保证获取到当前页面的title。

router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title;
  console.log(to);
  next();
})

之前我们所讨论的是router导航守卫的前置守卫(guard)beforeEach，接下来我们来讨论一下后置钩子(hook)afterEach

前置守卫是在路由跳转前回调，后置钩子则是路由跳转后回调

这是后置钩子的源码：(不含next函数)

afterEach(hook: (to: Route, from: Route) => any): Function

后置钩子的调用：

router.afterEach( (to, from) => {
  console.log(‘---‘);
  console.log(to);
  console.log(from);
})

我们上面是用的导航守卫被称之为全局守卫

• 路由独享守卫
• 组件内的守卫

Vue-router-keep-alive

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

route-view也是一个组件，如果直接被包在keep-alive里面，所有的路径匹配到的视图组件都会被缓存

activated和deactivated函数只有组件在keep-alive的情况下可以被调用

keep-alive两个重要的属性：

• include - 字符串或正则表达式，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件不会被缓存

*注：像exclude="profile,user"的写法，逗号后面不能加空格！！