我的代碼如下登錄.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 時，（主應用程序組件）完全是空的。登錄組件未呈現。我究竟做錯了什么 ？
1 回答
楊魅力
TA貢獻1811條經驗 獲得超6個贊
問題
問題出在您的導航防護代碼上。
當您導航到 時/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();
}
});
}
- 1 回答
- 0 關注
- 92 瀏覽
添加回答
舉報
0/150
提交
取消