学习vue-router路由守卫，这一篇就够了

导语：
使用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>

补充：

微信搜索【web小馆】

回复 【书籍】，即可获取 前端学习资料。

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

转载：https://blog.csdn.net/gitchatxiaomi/article/details/109014309