背景

如果我们有个需求，需要为SPA应用的每个页面增加title？

网页title来自于index.html中的 <title>而SPA中html只有一个，是不会变化的

那么我们只能在某个组件/页面加载的时候，手动设置document.title来手动改变网页标题

但是这样的话，每个页面都需要手动加，工作量大。

我们可以通过 路由守卫 钩子来解决这个问题

路由守卫使用

我们可以用Vue-Router实例的beforeEach来解决这个问题。

• 路由配置中，通过meta对象定义title属性
• 利用导航钩子beforeEach修改标题

1、路由配置 2、导航钩子使用以及参数解析

const router = new VueRouter({
    routes: [{},{}]
})
// beforeEach是Router实例上的方法
router.beforeEach((to, from, next)=> {
    // 由于嵌套路由meta={},而route 对象中的matches数组中包含了完整的父子/本身 路由内容。所以我们在这个取title的场景中，用matches取第0项，即父路由信息，若没有嵌套路由，第0项就是本身内容
    // ducument.title = to.meta.title
    ducument.title = to.matches[0].meta.title
    next()
})

参数解析：

• to: 即将要进入的目标路由对象
• from: 当前导航所在的，且即将要离开的路由对象
• next: 内置的跳转进入下一步路由的方法，必须存在，才能正常使用路由

路由守卫补充

回调也叫钩子hooks,是指在特殊场景/时期需要执行的回调方法。

后置钩子

vue路由跳转有：跳转前的前置钩子，跳转后的后置钩子,分别对应beforeEach((to, from, next)=>{}) 和afterEach((to, from) => {})

路由独享守卫

经测试，全局前置钩子执行-》路由独享前置钩子执行-》全局后置钩子执行