vue如何根据不同路由地址更改页面的标题

Vue如何根据不同路由地址更改页面的标题

先上效果图

这个效果实现起来很简单，只需要用到Vue-router中的全局路由守卫
分别有beforeEach（进入路由之前），beforeResolve（解析路由）以及全局后置钩子afterEach
我们可以简单的看一下这三个守卫和生命周期函数的关系，我们用日志打印一下看看

可以看出，这三个守卫全部在生命周期函数之前执行，所以在全局守卫中是不能调用vue实例的，因为实例还未被解析
我们利用全局前置守卫beforeEach就可以实现更改标题的效果

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

meta字段是配置路由信息时加入的字段

meta: { title: '首页' }

将你所有需要跳转的路由信息中配置好meta字段，然后使用document.title就可以进行更改了
同样能实现这样效果的方法是我们可以使用beforeCreate生命周期函数来实现，原理相同，但是对于代码的侵入性较高，不建议大家使用，还是路由守卫更加快捷

好啦，希望不足之处可以请大佬不吝赐教！