beforeEach里的next问题

router.beforeEach((to, from, next) => {
  const { isLogin } = localStorage
  if (isLogin || to.name === 'Login') {
    next()
  } else {
    next({ name: 'Login' })
  }
})

老师，1. 我不明白为什么要加to.name==='login’这个条件？不加为什么会死循环。不加的话，如果isLogin是false就走else里的跳转到Login界面。如果是true不就走第一个next()了吗？
2. 还有为什么if里的next不是写成next({name: ‘Home’})? 它怎么知道我要跳转到哪个界面？

慕勒8540250 2023-12-03

源自：项目：仿京东到家首页开发 3-2 路由守卫实现基础登陆校验功能

收起

1回答

好帮手慕小李 2023-12-04 09:47:36

同学你好，解答如下：

1、如果不加只是isLogin为判断条件的话，那么假设在我们不登录的情况下，系统会一直让我们去到Login页面，当再到Login页面时又会跳转到Login页面如此重复就会形成死循环。所以它只能作为条件之一，那么为什么叫加上to.name === 'Login'这是因为，如上述所说isLogin只有一个条件时会走else条件，那么系统会让我们重新回到Login页面，此时如果加上to.name这个条件，那么就会形成if(isLogin || to.name === 'Login')其中的to.name === 'Login'是满足条件的所以就可以继续走next（如后期可以手动设置为登录后跳转到主页，或者哪个哪个页面即可）

2、Vue是个框架，首先我们要理解框架是已经或暂时已经被设定好了的，它并不能那么灵活如果灵活它就失去了框架的意义，所以它本身是有自己的语法的。在if中尽量不要将其写死，在本章节课程中老师有手动跳转的例子同学可以学习老师的思路（实际开发的思路也是如此）

祝学习愉快！

收起回答

提问者慕勒8540250 #1

老师，如果不加to.name==='login’，当没有登陆isLogin是false的情况下，会走else中的逻辑，即跳转到Login界面。当页面发生跳转，会触发beforeEach函数，因为isLogin还是false，会继续执行else中的next({ name: 'Login' })跳转到login界面，之后还是按这个步骤跳转，所以进入了死循环。我的理解对吗？
还有我不理解next()函数里面不加任何name属性的参数会跳转到哪里呢？

2023-12-04 13:27:44
好帮手慕小李回复提问者慕勒8540250 #2

第一，如果不加则会一直进入login页面，所以会产生死循环的问题。
第二，next中不指定路由之后走向的话，会停留在当前页面中。

2023-12-04 17:17:30