vue-router导航守卫

为什么使用导航守卫?
我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?

网页标题是通过
可以通过JS来修改
更好的办法-使用导航守卫
vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

导航守卫使用
我们可以利用beforeEach来完成标题的修改.
首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
其次, 利用导航守卫,修改我们的标题.

import Vue from ‘vue’
import VueRouter from ‘vue-router’

const Home = () => import('../components/Home.vue')
const User = () => import('../components/User.vue')

Vue.use(VueRouter)

const routes = [
    {
        path: '/home', 
        redirect: './home',
        // 元数据 (描述数据的数据)
        meta: {
            title: '首页'
        }
    },
    {
        path: '/user', 
        component: User,
        meta: {
            title: '用户'
        }
    }
]

const app = new VueRouter({
    router,
    mode: 'history'
})

// 前置守卫(guard)
router.beforeEach((to, from, next) => {
    // 从from跳转到to
    window.document.title = to.matched[0].meta.title;
    next();
})

export default router