这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

为什么使用导航守卫?

我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢? 网页标题是通过来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变. 但是我们可以通过JavaScript来修改的内容.window.document.title = '新的标题'.

那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢? 普通的修改方式: 我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中. 通过mounted声明周期函数, 执行对应的代码进行修改即可.

生命周期函数 组件被创建出来后回调created函数模板挂载到DOM上后回调mounted函数界面发生一次刷新就调用一次updated函数

但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).

export default {
  name : "Home",
  // created () {
  //   console.log("crested");
  //   document.title = "首页"
  // }
};

有没有更好的办法呢? 使用导航守卫即可.

监听网页跳转过程

什么是导航守卫?

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.

vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

导航守卫使用

我们可以利用beforeEach来完成标题的修改. 首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义（meta：元数据--描述数据的数据）其次, 利用导航守卫,修改我们的标题.

导航钩子的三个参数解析: to: 即将要进入的目标的路由对象. from: 当前导航即将要离开的路由对象. next: 调用该方法后, 才能进入下一个钩子. 必须写

next: Function :一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮)，那么URL地址会重置到from路由对应的地址。
next("/")或者next({ path: '/'}): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如replace: true，name :'home'之类的选项以及任何用在router-link的 to prop或router.push中的选项。

next(error): (2.4.0+)如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。 确保要调next方法，否则钩子就不会被resolved。

  {
    path : '/profile',
    component : Profile,
    meta : {
      title : '档案'
    }
  }

// 前置守卫guard 表示回调
router.beforeEach((to, from, next) =>{
  // 从from跳转到to
  // matched:用于嵌套路由,第一个元素为最外层的大标题
  document.title = to.matched[0].meta.title
  console.log("++++");
  next()
})

// 后置钩子hook
router.afterEach((to, from) => {
  console.log("----");
})

导航守卫补充

补充一: 如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.

补充二: 上面我们使用的导航守卫, 被称之为全局守卫（只要进行路由跳转，就会执行 路由独享的守卫.（只有进入某个路由才会回调,可以在路由配置上直接定义beforeEnter守卫 组件内的守卫.

更多内容, 可以查看官网进行学习: router.vuejs.org/zh/guide/ad…

// 你可以在路由配置上直接定义beforeEnter守卫:
// 这些守卫与全局前置守卫的方法参数是一样的。
const router = new VueRouter({
  routes:[
    {
      path: "/foo" ,
      component: Foo,
      beforeEnter: (to，from,next)=>{
        ...
      }
    }]
})

// 最后，你可以在路由组件内直接定义以下路由导航守卫:
// beforeRouteEnter
// beforeRouteUpdate (2.2新增)
// beforeRouteLeave


const Foo = {
  template: `...`,
  beforeRouteEnter (to，from,next){
    //在渲染该组件的对应路由被confirm前调用
    //不!能!获取组件实例'this' 
    //因为当守卫执行前，组件实例还没被创建
    }
  beforeRouteUpdate (to,from,next){
    //在当前路由改变，但是该组件被复用时调用
    //举例来说，对于一个带有动态参数的路径/foo/:id，在/foo/1和 /foo/2之间跳转的时候
    //由于会渲染同样的 Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    //可以访问组件实例'this' 
  },
  beforeRouteLeave (to，from,next){
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例'this'
  }
}

vue-router（五）-导航守卫 ｜ 青训营笔记

为什么使用导航守卫?

什么是导航守卫?

导航守卫使用

导航守卫补充

vue-router（五）-导航守卫｜青训营笔记