我的代碼如下登錄.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>驗(yàn)證一次性密碼<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>因此，當(dāng)不使用導(dǎo)航防護(hù)時(shí)，嵌套路由可以正常工作并呈現(xiàn) OTP_Verify 組件。但是當(dāng)我取消注釋時(shí)，OTP_Request 組件會(huì)按預(yù)期呈現(xiàn)，但是當(dāng)我前往路徑 /login/verify 時(shí)，（主應(yīng)用程序組件）完全是空的。登錄組件未呈現(xiàn)。我究竟做錯(cuò)了什么 ？
1 回答
楊魅力
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊
問題
問題出在您的導(dǎo)航防護(hù)代碼上。
當(dāng)您導(dǎo)航到 時(shí)/login/verify，next()永遠(yuǎn)不會(huì)調(diào)用 。
即這里if (to.fullPath !== "/login/verify") next("/login");
正如您在vue-router導(dǎo)航守衛(wèi)中所知，為了進(jìn)行路由，next()應(yīng)該調(diào)用。
解決方案
添加一個(gè)案例來處理上述情況，以便始終調(diào)用 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 關(guān)注
- 107 瀏覽
添加回答
舉報(bào)
0/150
提交
取消