vue-router路由导航守卫

Posted 2022-11-26 GHUIJS

前言:

前不久项目中参与了一个关于消息的模块，在编辑消息中点到其他菜单时，想加一个切换菜单则丢失当前编辑的判断，这也是很基本的操作，基本在带编辑的逻辑都应该添加这样的判断。经过百度知道了这个onBeforeRouteLeave，vue-router的一个组合式api，就是可以在路由跳走之前添加一些逻辑，比方说添加一个条件判断，满足条件再跳转路由。

路由导航守卫：

后来慢慢的了解到这玩意的专业名词叫路由守卫。官方解释是这样的：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

分类：

• 全局守卫

//一般用于控权,比如用户没登录就跳转登录页面之类
router.beforeEach((to, from, next) => 
  // console.log("全局前置");
  next(); //执行跳转
);

//因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。
router.beforeResolve((to) => 
  console.log("解析守卫");
);

//不会接受 next 函数也不会改变导航本身：它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。它们也反映了 navigation failures 作为第三个参数：
router.afterEach(() => 
  // console.log("后置守卫");
);

• 路由独享守卫(就是给一个路由做处理)

const routes = [
  
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => 
      // reject the navigation
      return false
    ,
  ,
]

• 组件内守卫

<script setup lang="ts">
import 
  onBeforeRouteLeave,
  onBeforeRouteUpdate,
  // beforeRouteEnter,找不到模块
 from "vue-router";

onBeforeRouteLeave((to, from, next) => 
  console.log(to, from, next);
    const answer = window.confirm(
      'Do you really want to leave? you have unsaved changes!'
    )
    // 取消导航并停留在同一页面上
    if (!answer) return false
);

 //了解
 onBeforeRouteUpdate(() => 
   console.log("onBeforeRouteUpdate");
 );
</script>