代码编织梦想

路由守卫有哪几种?

路由守卫(导航守卫)分为三种:全局守卫(3个)、路由独享守卫(1个)、组件的守卫(3个)

路由守卫的三个参数

to:要跳转到的目标路由

from:从当前哪个路由进行跳转

next:不做任何阻拦,直接通行

注意: 必须要确保 next函数 在任何给定的导航守卫中都被调用过一次。它可以出现多次,但是只能在所有的逻辑路径都不重叠的情况下,否则会报错。
案例:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

一、全局路由守卫

全局路由守卫有三个:全局前置守卫,全局后置守卫,全局解析守卫

  • 全局前置守卫

1.使用方式:main.js中配置,在路由跳转前触发,这个钩子作用主要是用于登录验证,也就是路由还没跳转提前告知,以免跳转了再通知就为时已晚
2.代码:

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

3.例子:做登录判断

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

  if(to.path == '/login' || to.path == '/register'){

    next();

  }else{

    alert('您还没有登录,请先登录');

    next('/login');

  }

})
  • 全局后置守卫

1.使用方式:main.js中配置,和beforeEach相反,它是在路由跳转完成后触发,它发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫)之前。钩子不会接受next函数也不会改变导航本身
2.代码:

router.afterEach((to,from)=>{})
  • 全局解析守卫
    1.使用方式:main.js中配置,这个钩子和beforeEach类似,也是路由跳转前触发,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,即在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前调用。
    2.代码:
router.beforeResolve((to,from,next)=>{})

一、组件内守卫

组件内守卫有个三个:路由进入之前beforeRouteEnter,路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate

  • beforeRouteEnter(to, from, next)
    1.使用方式:在组件模板中使用,跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
    2.代码:
beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },
  • beforeRouteUpdate(to, from, next)
    1.使用方式:在组件模板中使用,跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
    2.代码:
beforeRouteUpdate (to, from, next) {
    // 同一页面,刷新不同数据时调用,
    // 可以访问组件实例 
}
  • beforeRouteLeave(to, from, next)
    1.使用方式:在组件模板中使用,跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
    2.代码:
beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
}

路由独享守卫

路由独享守卫只有一个:进入路由时触发beforeEnter

  • 路由独享守卫 beforeEnter(to, from, next)
    1.使用方式:在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫
    2.代码

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

导航解析流程

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

结尾:

vue2和vue3的写法基本一致没有改变

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

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

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

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

vue路由守卫 1 什么是路由守卫 路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。 类似于组件生命周期钩子函数 。 2 分类 1.全局路由守卫 beforeEach(to, from, next) 全局前置守卫,路由跳转前触发beforeResolve(to, from, next) 全局解析守卫 在所有组

vue3:路由守卫(全局守卫、路由独享守卫、组件内守卫)-爱代码爱编程

router.js:全局守卫 import { createRouter, createWebHashHistory } from 'vue-router' // 省略了routes 中的路由规则 const routes = [ ... ... ] const router = createRouter({ history: c

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

路由守卫就是当⻚⾯跳转的时候会触发的钩⼦函数, vue⼀共给我们提供了三种路由守卫 全局路由守卫 前置守卫: router.beforeEach((to,from,next) => {}) to-到哪里去 from --从哪里来 next–重定向 //路由拦截 我们经常使⽤路由守卫实现⻚⾯的鉴权 router.beforeEach

vue2 和 vue3 的 路由守卫_小刘先生很努力的博客-爱代码爱编程

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

vue——vue3路由导航守卫及其写法_dbt@12138的博客-爱代码爱编程

导航守卫:一个页面跳转到另一个页面,中间会触发某个函数 导航守卫3个状态 <script> export default { methods: { }, beforeRouteEnte

vue router 三种路由守卫_黄权彬dx的博客-爱代码爱编程

全局路由 1. 全局前置守卫,router.beforeEach, to:要进入的目标对象; form:当前导航离开的路由对象 next fn:必须执行,跳转到一个新地址 const router = createRo