Вложенный Vue компонент не отображается при использовании навигации

Question

PS: Это мой первый вопрос о SO, поэтому прости меня за любые грубые ошибки, которые я совершаю

Мой код выглядит следующим образом

Логин. vue

  <div class="login">
    <div class="dialog row justify-content-end">
      <div class="col col-md-5 col-lg-3">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {};
  }
};
</script>

<style lang='scss'>
.login {
  height: 100vh;
}
</style>

OTP_Request. vue

<template>
  <div class="otp-request">
    <div class="row justify-content-center pt-5">
      <div class="col" id="login-page-title">Parent's Login</div>
    </div>
    <div class="row justify-content-center pt-5">
      <div class="col" id="prompt">Enter Your Phone Number</div>
    </div>
    <div class="row justify-content-center pt-3">
      <input type="text" id="phoneNo" />
    </div>
    <div class="row justify-content-center pt-3">
      <button>Get OTP</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "OTP_Request"
};
</script>

<style lang='scss'>
#login-page-title {
  text-align: center;
  font-weight: 700;
}
#prompt {
  text-align: center;
  font-weight: 500;
}
#phoneNo {
  text-align: center;
}
</style>

Проверка OTP

<template>
  <div class="otp-verify">
    <div class="row justify-content-center pt-5">
      <div class="col" id="verify-page-title">Verify OTP</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OTP_Verify"
};
</script>

<style lang='scss'>
#verify-page-title {
  font-weight: 700;
}
</style>

маршрутизатор /index.js

import VueRouter from "vue-router";
import firebase from "firebase";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home")
  },
  {
    path: "/login",
    component: () => import("../views/Login"),
    children: [
      {
        path: "",
        component: () => import("../components/OTP_Request")
      },
      {
        path: "verify",
        component: () => import("../components/OTP_Verify")
      }
    ]
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});


// NAVIGATION GUARD
// router.beforeEach((to, from, next) => {
//   firebase.auth().onAuthStateChanged(function(user) {
//     if (to.path !== "/login" && user == null) {
//       if (to.fullPath !== "/login/verify") next("/login");
//     } else {
//       next();
//     }
//   });
// });

export default router; 

Таким образом, вложенные маршруты работают нормально и отображают компонент OTP_Verify, когда навигационная защита не используется. Но когда я раскомментирую его, компонент OTP_Request будет отображаться, как и ожидалось, но когда я иду по пути / login / verify, (компонент Main App) полностью пуст. Компонент Login не отображается. Что я делаю неправильно ?

Answer 1

Проблема

Проблема связана с вашим кодом защиты навигации.

Когда вы переходите к /login/verify, next() никогда не вызывается.

Т.е. здесь if (to.fullPath !== "/login/verify") next("/login");

Как вы знаете из vue-router навигационных охранников, для осуществления маршрутизации необходимо вызвать next().

Решение

Добавить случай для обработки выше case, так что next () вызывается всегда.

router.beforeEach((to, from, next) => {
   firebase.auth().onAuthStateChanged(function(user) {
     if (to.path !== "/login" && user == null) {
       if (to.fullPath !== "/login/verify") {
         next("/login");
        }
       else{ next(); } // --> HERE
     } else {
       next();
     }
   });
 }