Vue --- 全局导航守卫，实现页面跳转修改页面标题

一、全局的，首先直接看代码，代码主要集中在路由配置文件中，如下图，尤其是红框圈中的地方

1、在路由对象中的对应组件写上meta对象，meta就表示元数据，也就是描述数据的数据，写上title:"页面标题的名字"
2、配置路由和组件之间的应用关系const router = new VueRouter({routes})
3、写入全局守卫代码，该代码为前置守卫，也就是路由跳转之前执行

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

其中document.title = to.meta.title的意思是，从（from）即将离开的路由到（to）要到达的路由，而next()就是两个路由的钩子，如果不写，就不会进入下一个路由，则页面上就不会显示内容，更专业的解释可以到官方文档中查看，最终效果如下动态图

二、以上方法适用于简单的路由，如果路由中有嵌套路由，那么标题就是undefined，情况如下
1、原先的Home路由嵌套了homeone路由

下图为嵌套的homeone路由的代码

2、如果全局导航守卫依然这么写，就会出现标题undefined的问题


3、既然第一个例子已经提到（to）是要到达的路由，并且homeone路由本身就是Home路由的嵌套路由，所以标题应依然是【首页】，那么可以打印下to，看到如下图结果

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

可以看到，在嵌套路由后，出现了matched的数组，并且首页是在下标为0的地方，所以只需这么修改即可

最终效果如下

补充：除了有前置守卫router.beforeEach以外，其实也有router.afterEach(to , from)后置守卫，该守卫不需要next()，并且会在前置守卫执行后执行