vue3 常用的两个路由守卫

1.beforeEach   --------  (跳转路由前执行) 

import router from "@/router";
// 添加导航守卫
router.beforeEach((to, from, next) => {
  if (from.path === '/router-name' || to.path === '/go-router-name') {
       // todo 需要执行的操作
  }
  next();
});

form后接参数：从哪个路由来

to 后接参数： 要跳到哪个路由

next () 继续向下执行代码

仅用作判断条件

2.afterEach    --------  (跳转路由后执行)                 无需next() 向下执行

router.afterEach((to,from)=>{})

---

vue3  一些常用跳转方式 

<script setup>
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    router.push({ path: '/path', query: { name: 'hahaha' } });  // 跳到指定path下+传参
    router.replace('/router-name'); // 用法同上,但replace不保留访问记录 
    router.back()  //或  router.go(-1)// 返回上一个路由的历史记录
    router.go(-2) // 回退到倒数第二个访问的路由
    // 注：路由回退方法在企业微信或部分手机端会无效
</scrip>