vue-router全局导航守卫

实现组件跳转时，浏览器标题更新

①router的index.js文件中

routes配置添加meta属性

 

②router.beforeEach方法

 

import Vue from 'vue'
import VueRouter from 'vue-router'
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = ()=> import('../components/Profile')

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [
    {
     path:'/',
     //重定向到home
     redirect: '/home'
    },
    {
     path:'/home',
     component: Home,
     meta: {
        title: '首页'
     },
     children: [
        {
            path: '',//设置嵌套路由默认路径
            redirect: 'message'
        },
        {
            path: 'news',//子组件不能加/
            component: HomeNews
        },
        {
            path: 'message',
            component: HomeMessage
        }
     ]
    },
    {
        path:'/about',
        component: About,
        meta: {
            title: '关于'
         },    
    },
    {
        path: '/user/:userName',
        component: User,
        meta: {
            title: '用户'
         },
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: '档案'
         },
    }
]

const router = new VueRouter({
    mode: 'history',//使用history模式，去除url中的#符号（hash模式）
    //配置路由和组件之间的应用关系
    routes
})
//前置钩子,跳转前回调(全局守卫)
router.beforeEach((to, from, next) => {
    document.title = to.matched[0].meta.title
    console.log("跳转前")
    console.log("---"+JSON.stringify(to))
    next()
})
//后置钩子，跳转后回调(全局守卫)
router.afterEach((to,from)=>{
    console.log("跳转后")
})

//3.将router对象传入到vue实例
export default router