使用导航防护时未呈现嵌套的 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) => {&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;}