Vue | 路由守卫面试常考

海军 等级 502 0 0

前言

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

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 | 路由守卫面试常考

结语

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

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

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

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

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

收藏
评论区

相关推荐

vue.config.js配置前端代理
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/cssloaderoptions // 这里只列一部分,具体配置参考文档 module.exports { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
基于Vue实现一个有点意思的拼拼乐小游戏
笔者去年曾写过一个类似的拼拼乐小游戏,技术栈采用自己的Xuery框架和原生javascript实现的,脚手架采用gulp来实现,为了满足对vue的需求,笔者再次使用vue生态将其重构,脚手架采用比较火的vuecli。 前言 为了加深大家对vue的了解和vue项目实战,笔者采用vue生态来重构此项目,方便大家学习和探索。技术栈如下: vuecli4
Vue 项目性能优化—实践指南
Vue 项目性能优化—实践指南 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
Vue | 路由守卫面试常考
前言 最近在整理基础,欢迎掘友们一起交流学习,关注公众号<a href"https://z3.ax1x.com/2021/03/27/6zmqSI.jpg"前端自学社区</a <br/ 结尾有彩蛋哦! 🎉🎉🎉 Vue Router 路由守卫 导图目录 1. 路由守卫分类 2. 全局路由守卫 3. 单个路由守卫
面试官问 Vue 性能优化,我该怎么回答
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和
Vue | 路由守卫面试常考
前言 最近在整理基础,欢迎一起交流学习 <br/ 结尾有彩蛋哦! 🎉🎉🎉 Vue Router 路由守卫 导图目录 1. 路由守卫分类 2. 全局路由守卫 3. 单个路由守卫 4. 组件路由守卫 5. 路由守卫执行的完整过程<hr/ 路由守卫分类 全局路由 单个路由独享 组件内部
Vue 性能优化
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d