vue2 和 vue3 的路由守卫

vue2 路由守卫：

vue-router 路由实现:
路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。
首先知道有3个参数 to , from, next (意义：
to是即将要进入的目标路由对象,
from 是当前导航即将要离开的路由对象,
next调用该方法后，才能进入下一个钩子函数afterEach )

next() // 直接进入to所指的路由
next（false） // 中断当前路由
next(‘route’) // 跳转指定路由
next(‘error’) // 跳转错误路由

1 全局守卫： this.$router.beforeEach((to, from, next) =>{next(); })
执行之前触发beforeEach(to,from,next)，执行后触发router.afterEach(to, from)；

2 路由独享守卫： this.$route.beforeEnter(to, from ,next())；

3 组件内部的守卫： 
路由进入之前 beforeRouteEnter(to, from, next())
路由更新之前 beforeRouteUpdate(to, from, next())
路由离开之前 beforeRouteLeave(to, from, next())

看下示例
vue2 中写入全局的路由守卫，一般就直接在router.index 页面完成。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router)

const router = new Router({
 routes: [
	 path: '/', // 默认进入路由
	   redirect: '/home'  //重定向
	  },
	  {
	   path: '/login',
	   name: 'login',
	   component: LoginPage
	  },....
	]
 })
 
 router.beforeEach((to, from, next) => {
	 console.log('初始化就执行全局路由守卫');
	 // to: Route: 即将要进入的目标 路由对象
	 // from: Route: 当前导航正要离开的路由
	 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

	 const nextRoute = ['home', '....'];		
	 let isLogin = global.isLogin; // 是否登录
	 // 未登录状态；当路由到nextRoute指定页时，跳转至login
	 if (nextRoute.indexOf(to.name) >= 0) { 
	  if (!isLogin) {
	   router.push({ name: 'login' })
	  }
	 }
	 // 已登录状态；当路由到login时，跳转至home 
	 if (to.name === 'login') {
	  if (isLogin) {
	   router.push({ name: 'home' });
	  }
	 }
	 next();
	});
	// 或者这样写  全局路由守卫
	// router.beforeEach((to, from, next) => {
    //  const isLogin = localStorage.ele_login ? true : false;
	//   if (to.path == '/login') {
	//    next();
	 //  } else {
	// 是否在登录状态下
	//    isLogin ? next() : next('/login');
	//  }
	// });
	
	export default router;

假设我们执行了跳转登录页面
login.vue页面内部
当点击登录按钮时

 handleLogin() { // 发送请求
      this.$axios
        .post("/api/posts/goxxx", {
          phone: this.phone, // 参数
          code: this.verifyCode // 参数
        })
        .then(res => {
          // console.log(res);
          // 检验成功 设置登录状态并且跳转到/
          localStorage.setItem("ele_login", true);
          this.$router.push("/"); // 进入首页
        })
        .catch(err => {
          // 返回错误信息
          this.errors = {
            code: err.response.data.msg
          };
        });
    },

vue2独享路由守卫

就是某一个路由所单独享用的路由守卫。

官方定义是这样说的：你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。
给个模拟的需求当path路径名必须是xinxi才可以进行访问
我们在路由页面中

{
    name: 'xinxi',
    path: 'news', // 注意路由底层给你加了 '/' ，如果自己加 '/' 有可能还显示不出效果
    component:News,
    meta:{isAuth:true,title:'信息'},
    beforeEnter: (to,from,next)=>{
        //里面的内容跟全局前置路由守卫一样的代码
        console.log('beforeEnter',to,from,next)
        if(to.meta.isAuth){
            if(localStorage.getItem('school') === 'xinxi'){
                next()
            }else{
                alert('权限不够用')
            }
        }else{
            next()
        }
    }
},
注意 ：独享路由守卫只有前置你，没有后置。独享的路由守卫可以和全局后置路由守卫配合在一起(可以随意的组合)

组件内部守卫

  //通过路由规则进入该组件时候被调用
  beforeRouteEnter(to, from, next) {
    let data
    console.log(to, from)
    if (from.name === 'buildingDeoMonitor') {
      if (sessionStorage.getItem('navData') != null) {
        data = JSON.parse(sessionStorage.getItem('navData'))
        next(vm => {
          vm.navFormInfo.data = data
        })
      } else {
        next()
      }
    } else {
      next()
    }
  },

假设我们要离开某个页面就要看是否要清除的缓存或者判断
// 路由离开之前
 beforeRouteLeave(to, from, next) {
    // 判断要跳转哪个页面 从而清除缓存
    sessionStorage.removeItem("treelist");
    sessionStorage.removeItem("orgid");
    next();
  },
  再或者
   beforeRouteLeave(to, from, next) {
    // 判断是否提交
    if (this.action == 1) {
      // 判断往哪里跳转
      if (to.path.indexOf("dataitem") != -1) {
        if (this.issubmit > 1) {
          sessionStorage.setItem("eauForm", JSON.stringify(this.ruleForm));
          next();
        } else {
          this.ismess = true;
          this.success = 3;
          this.message = this.$t("phrase.saveEneFirst");
        }
      } else {
        next();
      }
    } else {
      next();
    }
  },

vue2的也就结束了
vue3 和这些几乎是一样的。唯一不同的是就是组件内部的路由守卫
在这里插入图片描述也就是说 onBeforeRouteLeave、onBeforeRouteUpdate是vue-router提供的两个composition api，它们只能被用于setup中。

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
export default {
  setup() {
     onBeforeRouteLeave((to,from)=>{//离开当前的组件，触发
        alert('我离开啦')
    })
    onBeforeRouteUpdate((to,from)=>{//当前组件路由改变后，进行触发
        console.log(to);
    })
  }
}

值得注意的是路由进入之前 beforeRouteEnter并没有变，也不用写在setup内部。

	export default defineComponent({
	    setup() {
	        let obj=reactive({
	            name:'张三',
	        })
	        return {obj}
	    },
	    beforeRouteEnter(to, from, next) {
	        console.log(to);  //上一个页面前往的的页面(当前页面)
	        console.log(from);//来自哪一个页面
	        next((e:any) => {
	            // 这个回调参数e,包含setup中暴露出去的数据以及内置方法
	            window.console.log(e)
	            // 获取是否来自home1页面
	            if(from.path=='/home1'){
	                e.obj.name='李四'
	            }
	        })
	    },
	})

你学废了吗，欢迎指正，欢迎指正。