全局守卫包括前置守卫和后置守卫调用方法

在router／index.js里面修改title标签方法

const routes = [
    {
        path: '',
        redirect:'/home'
    },
    {
        path: '/home',
        component: Home,
        meta: {
            title: 'home'
        },
        //子组件添加，第一个为空，导入默认显示用redirect
        children: [
            {
                path: '',
                redirect: 'news'
            },
            {
                path: 'news',
                component: HomeNews,
            },
            {
                path: 'message',
                component: HomeMessage,
            }
        ]
    },
    {
        path: '/about',
        component: About,
        meta: {
            title: 'about'
        },
        //导入守卫方法
        beforeEnter: (to, from, next) => {
            console.log('about beforeEnter');
            next()
        }
    },
    {
        path: '/user/:id',
        component: User,
        meta: {
            title: 'user'
        },
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: 'profile'
        },
    },
]

const router = new VueRouter({
    //配置路由和组建之间的应用关系
    routes,
    mode: 'history',
})

//全局守卫，修改TITLE标签用法。
//修改导航方法。前置守卫
router.beforeEach((to, from, next) => {
    //从from跳转到to
    document.title = to.matched[0].meta.title
    //console.log(to);
    console.log('+++++');
    next()
})

//后置守卫
router.afterEach((to, from) => {
    console.log('----');
})