vue-router 导航守卫

一、改变当前路由对应组件的title

SPA只有一个页面，对应的也只有之一titile。当我们点击不同组件，想显示出相应的title时，第一想法可以去每个组件中添加对应的title，那么显示到该组件时title也会随着改变。
但是，当项目的组件很多时，要点击每个组件进行修改相同的内容，费时且不好维护。
这时就可以使用导航守卫。

二、导航守卫

导航守卫是用来监听路由的进入和离开。
v-router提供了两个钩子函数beforeEach()和afterEach()，分别在路由离开前和离开后触发。

三、导航守卫的使用

可以利用beforeEach()改变title.
1.在router文件下的js文件中的配置路由和组件部分，给每个组件添加title信息

    {
        path: '/about',
        component: About,
        meta: {
            title: '关于'
        }
    },
    {
        path: '/user/:userid',
        component: User,
        meta: {
            title: '用户'
        }
    },

2.利用v-router的beforeEach()，当路由离开前，改变当前组件的title
to：即将要进入的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后才能进入下一个钩子

//前置守卫（guard）
router.beforeEach((to,from,next) => {
    document.title = to.meta.title;
    console.log(to)
    next()
})

但是当遇到路由嵌套时，当前路由的title会显示为undefined。
首页默认显示的是home路由下的news子路由，而我们并没有在news下配置title信息。

image.png

而news的title信息存放在当前路由对象的matched数组中。

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

image.png

//前置守卫（guard）
router.beforeEach((to,from,next) => {
    document.title = to.matched[0].meta.title;
    next()
})

image.png