Vue.js--导航守卫-蒲公英云

Vue.js--导航守卫

我就是我 2021-08-24 15:09 502阅读 0赞

导航守卫

vue-router提供的导航守卫主要用来监听路由的进入和离开的。
vue-router提供了beforeEach和afterEach，他们会在路由即将改变和改变前后触发。

示例

在路由跳转的同时，修改页面标题。

//引入Vue
import Vue from 'vue'
//引入vue-router
import VueRouter from 'vue-router'
//加载路由插件
Vue.use(VueRouter)
//创建一个数组来指定路由匹配列表，每一个路由映射一个组件
const routes = [
    { 
        path: '/index',
        //这种写法webpack会把每一个路由打包成一个js文件，实现懒加载也防止main.js文件过大
        component: () => import('../components/index.vue'),
        meta: {  
            title: '首页'
         }
    },
    { 
        path: '/about',
        component: () => import('../components/about.vue'),
        meta: {  
            title: '关于'
         }
    },
    { 
        path: '/user/:id',
        component: () => import('../components/user.vue'),
        meta: {  
            title: '个人主页'
         }
    }
]
//创建路由对象
const router = new VueRouter({ 
    //使用HTML5的history模式
    mode: 'history',
    routes
})
//通过导航钩子设置导航守卫
router.beforeEach((to, from, next) => { 
    next()
    document.title = to.meta.title;
})
//将router对象导出
export default router