使用导航防护时未呈现嵌套的 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>.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>#login-page-title {  text-align: center;  font-weight: 700;}#prompt {  text-align: center;  font-weight: 500;}#phoneNo {  text-align: center;}</style>验证一次性密码<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>#verify-page-title {  font-weight: 700;}</style>

Answer 1

问题

问题在于您的导航保护代码。

当您导航到/login/verify时，next()永远不会调用 。

即这里if (to.fullPath !== "/login/verify") next("/login");

正如您在导航守卫中所知道的那样，应该调用vue-router路由以进行路由。next()

解决方案

添加一个案例来处理上述案例，以便始终调用 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();

     }

   });

 }