学习vue-router路由守卫

怼烎@ 2022-12-13 12:47 199阅读 0赞

导语：  
使用vue的时候总会使用到前端vue-router路由，检验登陆状态，检验是否路由跳转，就需要路由守卫来解决，这一篇文章教会你使用路由守卫。

### 这里写目录标题 ###

*  一，全局路由守卫
 *  二，路由独享的守卫
 *  三，组件内的路由守卫

# 一，全局路由守卫 #

我们在前端项目里面的`main.js`文件

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    router.beforeEach((to, from, next) => { 
      // ...
    });
    new Vue({ 
      el: "#app",
      store,
      router,
      components: {  App },
      template: "<App/>"
    });

这是全局路由守卫，每次路由跳转的时候，都会触发这个函数。

`to`就是去的路由  
`from`是跳转前的路由  
`next`就是确认跳转

这个全局的路由守卫，可以用来检验网址用户是否已经登陆，因为每次跳转的时候，都会执行这个函数，只要我们在这个函数里面，设置就行了。

如下：

router.beforeEach((to, from, next) => { 
    	//vuex里面的userinfo是否已经存在，不然就直接跳转到登录页面
      if(store.state.userInfo || to.path === "/login") { 
          next();
       } else { 
         next({ 
           path: "/login"
         })
       }
    });

# 二，路由独享的守卫 #

指某个路由页面独享这个守卫，其他的路由不能使用，提高了路由守卫的灵活性。

routes: [
      { 
        path: "/home",
        component: home,
        beforeEnter: (to, from, next) => { 
        //进入这个路由前，检验登陆
          if(store.state.userInfo || to.path === "/login") { 
          next();
    	  } else { 
    	    next({ 
    	      path: "/login"
    	    })
    	  }
        }
      }
    ];

# 三，组件内的路由守卫 #

判断用户要离开该路由的时候，检验是否用户已经保存该编辑页面内容，如果没有，跳出提示框，是否不保存离开该页面。

<template>
      <h1>xiaomizhou</h1>
    </template>
     
    <script> export default { data(){ return{ name:"xiaomizhou" } }, //路由进入前调用 beforeRouteEnter:(to, from, next)=>{ alert("Hello"+this.name); alert(to.path + from.path); next(); next(vm => { alert("Hello"+vm.name); }) }, //路由离开时调用，可以用在编辑页面 beforeRouteLeave:(to, from, next) => { if(confirm("离开该页面，不会保存你的操作，确认离开吗？") == true){ next(); }else{ next(false); } } } </script>

**补充**：

![在这里插入图片描述][20200902155530706.jpg_pic_center]

> 微信搜索【web小馆】
> 
> 回复 **【书籍】**，即可获取 **前端学习资料**。
> 
> 回复 **【全栈博客项目】**，即可获取**项目源码**。  
> 每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[20200902155530706.jpg_pic_center]: /images/20221123/96bfc23ed4be40adaf204eb4ae6c14d3.png
[20200825125805528.png_pic_center]: /images/20221123/07fe4951ec894677a417c5a46a2d91f7.png
[node]: /images/20221123/29cea30d571a4df89718e8d61e6ad9cf.png