2024年【面试题】 VUE 路由守卫 next() next({ (1)，2024年最新美团三面面经

本文链接：https://blog.csdn.net/2401_84616399/article/details/138743512

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端学习书籍导图-1

地址：前端面试题库

其实在路由守卫中，只有`next()`是放行，其他的诸如：`next('/logon') 、 next(to) 或者 next({ ...to, replace: true })`都不是放行，而是：中断当前导航，执行新的导航

可以这么理解：

next() 是放行，但是如果next()里有参数的话，next()就像被重载一样，就有了不同的功能。

而对于上面说的中断当前导航，执行新的导航打个比方：

现在我有一个守卫，在守卫中我使用next(‘/logon’)，肯定有人认为是会直接跳转到/logon路由

beforeEach((to, from, next) => { next('/logon') }
复制代码

其实执行要这么看：

beforeEach((to, from, next) => {
  beforeEach(('/logon', from, next) => {
  	 beforeEach(('/logon', from, next) => {
  	 	 beforeEach(('/logon', from, next) => {
  	 	 	beforeEac...  // 一直循环下去...... , 因为我们没有使用 next() 放行
 		}
 	 }
  }
复制代码

把这个守卫改一下，当我在地址栏输入/home时

beforeEach((to, from, next) => { 
if(to.path === '/home') { 
   next('/logon') 
    } else { 
    // 如果要去的地方不是 /home ， 就放行 
    next() } 
  }
复制代码

所以想要访问/home可以这么看

beforeEach((to, from, next) => { 
       beforeEach(('/logon', from, next) => { 
       next() // 现在要去的地方不是 /home ， 因此放行 
      } 
     }
复制代码

重点就在这，next(‘/logon’)不是说直接去/logon路由，而是中断这一次路由守卫的操作，又进入一次路由守卫，就像嵌套一样，一层路由守卫，然后又是一层路由守卫，此时路由守卫进入到第二层时，to.path已经不是/home了，这个时候才执行next()放行操作。

正以为如此很多人在使用动态添加路由`addRoutes()`会遇到下面的情况：

在addRoutes()之后第一次访问被添加的路由会白屏，这是因为刚刚addRoutes()就立刻访问被添加的路由，然而此时addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。

该如何解决这个问题 ?

此时就要使用next({ …to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。

next({ …to, replace: true })中的replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。

因此next({ …to, replace: true })可以写成next({ …to })，不过你应该不希望用户在addRoutes()还没有完成的时候，可以点击浏览器回退按钮搞事情吧。

其实next({ …to })的执行很简单，它会判断：

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5