使用导航防护时，嵌套 Vue 组件不会呈现

Question

我的代码如下登录.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>因此，当不使用导航防护时，嵌套路由可以正常工作并呈现 OTP_Verify 组件。但是当我取消注释时，OTP_Request 组件会按预期呈现，但是当我前往路径 /login/verify 时，（主应用程序组件）完全是空的。登录组件未呈现。我究竟做错了什么 ？

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();

     }

   });

 }