使用导航防护时，嵌套 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) => {&nbsp; &nbsp;firebase.auth().onAuthStateChanged(function(user) {&nbsp; &nbsp; &nbsp;if (to.path !== "/login" && user == null) {&nbsp; &nbsp; &nbsp; &nbsp;if (to.fullPath !== "/login/verify") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;next("/login");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;else{ next(); } // --> HERE&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp;next();&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;});&nbsp;}