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

来源:8-6 动态路由原理讲解

课里课外

2021-01-31

老师,最近我在项目中遇到比较很奇怪的问题,就是正常登陆页面点击菜单都没问题,但是只要刷新页面就会出现白屏,换个链接又可以了。比如登陆后点击/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()
      }
    }
    // ...
}

写回答

1回答

扬_灵

2021-02-01

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

0
0

Vue Element+Node.js开发企业通用管理后台系统

基于Element的中后台课程,一套中小型企业通用的后台管理系统

2829 学习 · 1716 问题

查看课程