路由守卫中next() next({path: '/'}) 和next({...to}) next({ ...to, replace: true })区别

Question

老师，最近我在项目中遇到比较很奇怪的问题，就是正常登陆页面点击菜单都没问题，但是只要刷新页面就会出现白屏，换个链接又可以了。比如登陆后点击/book/list菜单没问题，刷新一下页面白屏了，然后把链接改成/book/create又出来了，再刷新又白屏了。
结果一直排查，发现就是路由守卫那里的方法，直接使用next()不行，要改用next({ …to, replace: true })。虽然问题解决了，但是很奇怪，next({…to})不是和next()同个意思吗？replace: true 只是不记录浏览器历史跳转里，加不加没关系呀？

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  document.title = getPageTitle(to.meta.title)
  const hasToken = getToken()
  console.log(from, to)
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasPermission = store.state.permission.status
      console.log(hasPermission)
      if (hasPermission) {
        next()
      } else {
        await Promise.all([store.dispatch('user/getInfo'), store.dispatch('permission/getPermission')])
        // next()  问题就在这里，直接next不行，改用下面的就可以了。
        next({ ...to, replace: true })
        NProgress.done()
      }
    }
    // ...
}

Answer 1

扬_灵 2021-02-01 09:08:05

同学你好，你可以看一下这篇文档https://blog.csdn.net/qq_41912398/article/details/109231418