Vue-routerインプリメンテーション単一ページアプリケーションログインなしでログインページに自動的にジャンプ

これは私が前端から来た最初の文章で、どうやって始めたらいいか分かりません.じゃ、テーマに直行しましょう.まず、この機能の実現シーンについてお話ししましょう.私たちのグループはvueファミリーバケツを使って1ページのアプリケーションを実現し、最初からログイン状態を制限することを考えていました.例えば、ログイン後にログインページに戻ることができず、ログインページに戻ると、ログインしたばかりのページに戻ることができません.メールでjs:

new Vue({
  store,
  router
}).$mount('#app')
router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)
  console.log(1234)
  if (!to.meta.requiresAuth) {
    if (!store.state.collectItems.bAuth) {
      next({
        path: '/'
        // query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    if (store.state.collectItems.bAuth && to.fullPath === '/') {
      console.log()
      next(false)
      return
    }
    next()
  }
})

それらはログインしてこそアクセスできるもので、ログインしていない場合は直接アクセスできるもので、制限されています.これらの機能はすべて実現されて問題ありません.しかし、一つ発見した問題は、ブラウザのアドレスバーにログインしてからアクセスできるページを直接入力し、ページにアクセスできないが、ページがここに詰まって動かないということです.もともと設定されていたルーティングジャンプはまったく役に立たなかった.その後、このルートなので機能していないことに気づいたとき、ページは間違っていました.ある日突然私たちのグループの妹と議論したとき、突然ページレンダリングでルーティングを設定できるかどうかについて言及し、new Vueインスタンスの前にrouterの判断を加えました.

router.beforeEach((to, from, next) => {
  if (to.fullPath !== '/') {
    next({
      path: '/'
    })
    return
  }
  next()
})

          。                   ，            。

整理されたコード:

router.beforeEach((to, from, next) => {
  if (to.fullPath !== '/') {
    next({
      path: '/'
    })
    return
  }
  next()
})
new Vue({
  store,
  router
}).$mount('#app')
router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)
  console.log(1234)
  if (!to.meta.requiresAuth) {
    if (!store.state.collectItems.bAuth) {
      next({
        path: '/'
        // query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    if (store.state.collectItems.bAuth && to.fullPath === '/') {
      console.log()
      next(false)
      return
    }
    next()
  }
})

悪いところは皆さんに教えてもらいたいです.ありがとうございます.