代码编织梦想

vue路由守卫

1 什么是路由守卫

路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。 类似于组件生命周期钩子函数 。

2 分类

1.全局路由守卫
  1. beforeEach(to, from, next) 全局前置守卫,路由跳转前触发
  2. beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
  3. afterEach(to, from) 全局后置守卫,路由跳转完成后触发
2.路由独享守卫

beforeEnter(to,from,next) 路由对象单个路由配置 ,单个路由进入前触发

3.组件路由守卫
  1. beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
  2. beforeRouteUpdadte(to,from,next) 当前路由改变时触发
  3. beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发
4.参数

to: 即将要进入的目标路由对象

from: 即将要离开的路由对象

next(Function):是否可以进入某个具体路由,或者是某个具体路由的路径

3.详解

1.路由前置守卫 beforeEach(to, from, next)
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

在路由跳转前触发,在实际项目中应用最多,主要是登陆验证和跳转权限判断

2.全局解析守卫 beforeResolve(to, from, next)
router.beforeResolve((to, from, next) => {
  // ...
})

类似于路由前置守卫 beforeEach(to, from, next),也是路由跳转前触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机:在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后,afterEach(to, from)之前调用

3.全局后置守卫 afterEach(to, from, next)
router.afterEach((to, from) => {
  // ...
})

于路由前置守卫 beforeEach(to, from, next)相对,路由跳转后触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机:在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后, beforeRouteEnter(to, from)之前调用

4. 路由独享守卫 beforeEnter(to, from, next)
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

于路由前置守卫 beforeEach(to, from, next)相同,但在beforeEach(to, from, next)后触发

5. 组件路由守卫 beforeRouteEnter(to, from, next)
const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 不能获取组件实例 
    // 因为当守卫执行前,组件实例还没被创建
  }

因为该守卫在组件创建之前阶段触发,那个时候组件还没有创建成功,所以这个守卫内不能使用this获取组件实例

调用时机:在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后,全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用

6. 组件路由守卫 beforeRouteUpdate(to, from, next)
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 
  },

调用时机:在当前路由复用时

7. 组件路由守卫 beforeRouteLeave(to, from, next)
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
  }
}

通常用来禁止用户在还未保存修改前突然离开

调用时机:导航离开该组件的对应路由时调用

4.完整的导航解析流程

1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数

参考链接

5.实际应用

router.beforeEach((to, from, next) => {
  NProgress.start(); // NProgress实现显示加载进度条效果
  console.log("routemgr to", to.path);
  if ("这里判断是不是开发环境") {
    //开发环境下,直接路由
    next();
  } else {
    if (to.path == "/login") {
      //登录页面
      session.set("isOpen", "ok");
      next();
    } else if ("这里判断如不是生产环境下录页面需要判断权限") {
      //非生产环境下
      next();
    } else {
      //非登录页面需要判断权限
      console.log("routemgr user", lu.userinfo);
      if (gadget.isEmptyObject(lu.userinfo)) {
        //首次打开页面的时候,不需要弹出错误页面提示,直接跳转至登录页面即可
        let ret = session.get("isOpen");
        if (ret == "ok") {
          //vuex用户信息判断,如果不存在,则重新登录
          MessageBox.alert("用户未登录,需要重新登录.", "错误", {
            confirmButtonText: "确定",
            type: "error",
          }).then(() => {
            console.log("重新登录");
            //next(`/procmgr/login?redirect=${to.path}`);
            next(`/login`);
            NProgress.done();
          });
        } else {
          next(`/login`);
          NProgress.done();
        }
      } else {
        //权限判断
      }
    }
  }
});

Vue Router官方文档

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45466204/article/details/122884150

vue路由守卫_1学习者1的博客-爱代码爱编程_vue 路由守卫如何添加 js方法

全局守卫 router.beforeEach((to,from,next)=>{ //alert("还没有登录,请先登录!"); //next(); //console.log(to); //判断store.gettes.idLogin === false if(to.path == "/Login" || to.path =

vue插件集合20:vue三种路由引用以及路由守卫_thatits的博客-爱代码爱编程

1:这是最常见一种 route的方式 import home from "./home.vue"; import about from "./about.vue"; export default new Router({

vue系列_vue-router_组件内部的路由守卫(局部路由守卫)01_田江的博客-爱代码爱编程_vue-router 局部路由

如果你对vue的路由基础了解,就朝下看,不然不了解,请看vue系列_vue-Router入门和理解 。 一、概念: 路由守卫:就是进入当前路由前,有个人“门卫”进行保护,也可以理解为“安检”。 在Vue组件里有个函数叫作:beforeRouteEnter。就是完成路由守卫的,表示进入当前路由前要做什么? 1、如下示例代码(先理解beforeRout

vue 路由及路由守卫_鲸是鲸鱼的鲸的博客-爱代码爱编程

路由: 根据用户请求地址的不同返回不同的数据/页面 前端路由: 根据用户请求的地址来渲染不同的页面,前端路由不会经过后端,而是根据哈希值得变化来进行页面数据的渲染,

vue3设置路由守卫基于token进行路由导航和退出-爱代码爱编程

在某些时候,用户没有登录的情况下我们不允许用户访问以下特定的页面,此时我们需要用到路由守卫来实现。 在router下的index.js中的相应位置设置守卫函数,将守卫函数挂载到router的钩子beforeEach上,守卫函数表示每次运行路由函数都会执行的内容。// 给路由设置守卫函数 router.beforeEach((to, form, next)

Vue路由中3种常见导航守卫:全局守卫,独享守卫,组件内守卫-爱代码爱编程

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。 1. 全局前置守卫 你可以使用

Vue Router 路由(路由守卫)---route-爱代码爱编程

1、路由守卫 是什么 简单来说,导航守卫就是路由跳转前、中、后过程中的一些钩子函数,这个函数能让你操作一些其他的事儿,这就是导航守卫。 官方解释,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 2、路由守卫分类 导航守卫分为:全局的、组件内的、单个路由独享三种 2.1 全局的 指路由实例上直接操作的钩子函数,

Vue路由守卫详解-爱代码爱编程

路由导航过程中有若干生命周期钩子,可以在这里实现逻辑控制。 全局守卫,router.js //路由配置 { path: '/about', name: "about", meta: {auth: true}, //需要认证 component: ()=>import(/*webpackChunkName: "abou

Vue Router 导航守卫 - vue篇-爱代码爱编程

目录 导航守卫全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫完整的导航解析流程 导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $rout

vue中的路由守卫-爱代码爱编程

vue中的路由守卫 全局守卫 to: 目标路由 from: 当前路由 next() 跳转 一定要调用 next(false);//不让走 next(true);//继续前行 next(’/login’)//走哪 next({path:’/login’,params:{},query:{}})//带点货 1、在登录界面,登录成功时将username存储

vue路由安全守卫的使用(全局守卫)-爱代码爱编程

路由的安全守卫:在路由跳转之前或者跳转之后做一些处理。 1.全局守卫 beforeEach 在路由跳转之前 afterEach 在路由跳转之后 简单的登录退出页面 路由全局安全守卫举例 主要是在router.js路由节点文件和login.vue登录文件里进行一系列的操作。index.js 配置路由// 配置的路由节点 import Home from

Vue · 导航守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave-爱代码爱编程

const Foo = { template: `...`, beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 next(vm => {

vite2.x+vue3.x项目搭建一vue-router-爱代码爱编程

分几个单元做,分别 vue-router axios vuex element-plus sass typescript(这个比较火,我也尝试做) 我用的是vscode 提前安装好vscode、node.js最新稳定版先搭建vue3.x+vue-router 做之前先查看你的npm版本,vite官网针对不同版本有不同安装方法 一、安装vite+vue3.

Vite2+Vue3学习笔记(二):引入Vue-Router-爱代码爱编程

目录 前言 项目码云Gitea地址 其他文章 二、引入Vue-Router 1.安装Vue-Router  package.json 2.准备视图页面 src/App.vue src/components/Login.vue  运行项目  3.Vue-Router配置文件 src/router/index.js 4.项目入口文

Vue中的路由守卫-爱代码爱编程

作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫1.全局守卫 1.1 全局前置守卫 顾名思义,前置守卫主要是在你进行路由跳转之前根据你的状态去 进行一系列操作(全局前置是为在路由初始化以及跳转之前都会触发) 你可以使用router.beforeEach注册一个全局前置守卫(Each:每个,即在任意一个路由跳转的时候都会触发) 每个守卫方