Vue.js--导航守卫

我就是我 2021-08-24 15:09 421阅读 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

导航钩子有3个参数：

*  to：即将要进入的目标的路由对象；
 *  from：当前导航即将要离开的路由对象；
 *  next：调用该方法后，才能进入下一个钩子；

路由列表的meta字段可以自定义一些信息，beforeEach钩子可以从路由对象to里获取meta信息，从而改变标题。

next()方法可以设置参数，当参数为false时，可以取消导航；参数也可以是一个路径，使路由跳转到指定页面。

运行项目：  
点击标签，标题随路由的跳转切换：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/1a2987c51d614ba09e2d0a0917c44679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/725c79f4220c420b9a1ca6b053f9d2b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]: /images/20210813/364f72ad042c4e08b21098803d132e1f.png