vue の router.beforeEach() 無限ループ

背景

ロジックとしては、アクセス機器がPCかモバイル機器かを判断し、モバイル機器であればアクセスを遮断し、PCを許可する。

無限ループ

router.beforeEach((to, from, next) => {
  if (!isMobile()){ // PC端访问
    console.log("PC端访问")
    if (to.path !== '/login' && to.path !== '/register' && !isLogin()) {
      return next('/login')
    }
    next()
  }
  else {
    console.log("移动设备")
    next('/tip')
  }
})

その結果、エラー スタック オーバーフローが発生します。

RangeError: 最大呼び出しスタック サイズを超えました

理由

next('/tip') は に入る前に再度入るのでbeforeEach、ループが続くので、このループから抜け出したいだけです

改訂

router.beforeEach((to, from, next) => {
  if (!isMobile()){ // PC端访问
    console.log("PC端访问")
    if (to.path !== '/login' && to.path !== '/register' && !isLogin()) {
      return next('/login')
    }
    next()
  }
  else {
    console.log("移动设备")
    if (to.path == '/tip'){  //关键所在：如果要跳转的路径是/tip才放行
      next()
    }
    else {
      next('/tip')
    }
  }
})

効果：