vue-router 导航守卫

考虑一下这个需求：当页面发生跳转时，自动更改页面的标题。比如跳转到home页面，标题改为首页，跳转到about页面，标题改为关于。

首先，可以通过生命周期函数实现这个需求，但使用生命周期函数的话，需要在每一个组件中都添加实现代码，如果组件过多的话，这将不是一个好的选择。

这时，就可以考虑使用导航守卫的功能。

什么是导航守卫呢？导航守卫对全局跳转进行监听，并且可以根据你的需求在跳转时执行一些代码。

const router = new Router({
  routes: [
    {
      path:'/',
      redirect:'/home'
    },
    {
      path:'/home',
      component:() => import('../components/home'),
      meta:{
        title:'首页'
      }
    },
    {
      path:'/about',
      component:() => import('../components/about'),
      meta:{
        title:'关于'
      }
    }
  ],
  mode:'history'
})

//导航守卫
router.beforeEach((to,from,next) => {
  document.title = to.meta.title  //注意这里的用法，参数to的类型实际上是route类型，因此我们可以给每个route添加一个meta属性，如上
  next()  //next()在源码中已经被实现好了，这里需要加入它
})

这里需要注意的是，一旦某个路由是嵌套路由，那么显示的title将会变成undefined，这是因为path为类似于 /home/news 的格式，参数to在处理它时出现了问题。

想要解决嵌套路由的问题，只需要：

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

另外，既然有beforeEach()，其实容易想到应该还有afterEach()，afterEach()用于在跳转之后处理某些操作。

//afterEach没有next参数
router.afterEach((to,from) => {
  ...
})