router.beforeEach路由守卫报错问题记录

报错内容如下：（具体原因，还不清楚）

方式1：使用 van-tabbar-item 进行路由跳转的时候，报错

  <footer class="footer">
      <van-tabbar route>
        <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/mine" icon="friends">我的</van-tabbar-item>
      </van-tabbar>
    </footer>

方式2 (van-cell)、方式3 (router-link,以及$router.push)

    // 这种方式2，van-cell 路由跳转也报错
     <van-cell title="我的" to="/mine" is-link /> 
    // 方式3：使用 router-link 以及 $router.push() 方式进行路由跳转，是ok,不会报错
     <router-link to="/mine">我的(router-link方式)</router-link>

附上代码如下

// 路由守卫
router.beforeEach(async (to, from, next) => {
  const pageTitle = to.meta.title || '标题'
  document.title = pageTitle
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  const userRoles = JSON.parse(localStorage.getItem('userRoles')) || []

  // 当前页面需要登录 + 判断用户是否登录
  if (to.meta.needLogin) {
    if (userInfo) {
      // 避免在当前页面和目标页面相同时重复调用 next()
      if (to.path !== from.path) {
        next()
      }
    } else {
      // 用于区分：个人、企业
      const toLoginPath = userRoles.includes('person') ? '/login' : '/loginC'
      if (to.path === '/login' || to.path === '/loginC') {
        next()
      } else {
        // 如果用户没有登录，跳转到登录页，并将目标页面的路由地址作为参数传递给登录页面
        next({ path: toLoginPath, query: { redirect: to.fullPath } })
      }
    }
  } else {
    next()
  }
})