Vue | 路由守卫面试常考

海军
• 阅读 1429

前言

最近在整理基础,欢迎一起交流学习
结尾有彩蛋哦! 🎉🎉🎉

Vue Router 路由守卫

导图目录

    1. 路由守卫分类
    1. 全局路由守卫
    1. 单个路由守卫
    1. 组件路由守卫
    1. 路由守卫执行的完整过程

路由守卫分类

  • 全局路由
  • 单个路由独享
  • 组件内部路由

每个路由守卫的钩子函数都有 3 个参数:

to : 进入的目标路由

from : 离开的路由

next : 控制路由 在跳转时进行的操作,一定要执行。

它有 4 个行为:

next() : 钩子都执行完了,进入到下一个路由当中。

next(false): 中断路由进入下一个路由。

next('/') : 根据你路由跳转判断条件来进入对应的路由, / 为路由的 path

next(new Error) : 中断路由跳转,错误会被传递给 router.onError() 注册过的回调。

全局路由守卫

  • beforeEach(to,from, next)
  • beforeResolve(to,from, next)
  • afterEach(to,from)

全局路由直接挂载到 router 实例上。

//全局验证路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

// 白名单, 不需要验证的路由
const whiteList = ['/','/register']

router.beforeEach((to,from,next)=>{
  if(whiteList.indexOf(to.path) === 0) {
    // 放行,进入下一个路由
    next()
  } else if(!(sessionStorage.getItem('token'))){
    next('/');     
  } else {
    next()
  }  
})

beforeEach

使用场景

路由跳转前触发

作用

常用于登录验证

beforeResolve

使用场景

在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前调用。

afterEach

使用场景
  1. 发生在beforeEach和beforeResolve之后,beforeRouteEnter之前。
  2. 路由在触发后执行

单个路由独享

它只有一个 钩子函数, beforeEnter(to,from,next)

beforeEnter

使用场景

在beforeEach之后执行,和它功能一样 ,不怎么常用

      {
        path:'/superior',
        component: Superior,
        meta:{
          icon:'el-icon-s-check',
          title:'上级文件'
        },
        beforeEnter:(to,form,next) =>{

        }
      }

组件路由守卫

特点:

组件内执行的钩子函数

钩子函数:
  • beforeRouteEnter(to,from,next)
  • beforeRouteUpdate(to,from,next)
  • beforeRouteLeave(to,from,next)

beforeRouteEnter

使用场景:
  1. 路由进入之前调用。
  2. 不能获取组件 this 实例 ,因为路由在进入组件之前,组件实例还没有被创建。
执行顺序

beforeEach 和独享守卫beforeEnter之后,全局beforeResolve和全局afterEach之前调用.

beforeRouteUpdate

使用场景:
  1. 在当前路由改变时,并且该组件被复用时调用,可以通过this访问实例。
  2. 当前路由query变更时,该守卫会被调用。

beforeRouteLeave

使用场景:

导航离开该组件的对应路由时调用,可以访问组件实例this

路由守卫执行的完整过程

  1. 导航被触发
  2. 执行 组件内部路由守卫: beforeRouteLeave
  3. 执行 全局路由守卫 beforeEach
  4. 在重用组件内部路由守卫钩子 beforeRouteUpdate
  5. 执行 路由中的钩子 beforeEnter
  6. 在被激活的组件里调用 beforeRouteEnter
  7. 执行 全局的 beforeResolve 守卫 。
  8. 执行 全局的 afterEach 钩子
  9. beforeCreate
  10. created
  11. beforeMount
  12. mounted
  13. 执行 beforeRouteEnter的next的回调 ,创建好的组件实例会作为回调函数的参数传入。

Vue | 路由守卫面试常考

结语

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章

关注公众号 前端自学社区,即可获取更多前端高质量文章!

关注后回复关键词“加群”, 即可加入 “前端自学交流群”,共同学习进步。

关注后添加我微信拉你进技术交流群

欢迎关注公众号,更多精彩文章只在公众号推送

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
LinMeng LinMeng
3年前
Vue 重复进入相同路由警报
路由守卫重复进入两次,报错(虽然页面还可以运行)原因:vuerouter路由版本更新产生的问题,导致路由跳转失败抛出该错误,但并不影响程序功能Uncaught(inpromise)Error:Redirectedwhengoingfrom"/productDetail?VNK326acc75"to"/productTerms"via
海军 海军
3年前
Vue | 路由守卫面试常考
前言最近在整理基础,欢迎掘友们一起交流学习,关注公众号<ahref"https://z3.ax1x.com/2021/03/27/6zmqSI.jpg"前端自学社区</a<br/结尾有彩蛋哦!🎉🎉🎉VueRouter路由守卫导图目录1.路由守卫分类2.全局路由守卫3.单个路由守卫
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
2年前
vue 路由导航白话全解析
这里先放上官网的教程和说明:点击这里,vue导航守卫官方文档(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Frouter.vuejs.org%2Fzh%2Fguide%2Fadvanced%2Fnavigationguards.html)路由守卫路由守卫说白了就是路由拦截,在
待兔 待兔
4天前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Angular路由守卫
在企业应用中权限、复杂页多路由数据处理、进入与离开路由数据处理这些是非常常见的需求。当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢?其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单。什么是路由守卫?Angular的 Route 路由参数中除了熟
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
5个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
海军
海军
Lv1
海军,专注Web前端领域开发,分享开发经验与最新前端技术。 微信公众号: 前端自学社区
文章
27
粉丝
10
获赞
33