PS:这是我关于SO的第一个问题,请原谅我犯下的任何错误
我的代码如下
Login.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 lang='scss'>
.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 lang='scss'>
#login-page-title {
text-align: center;
font-weight: 700;
}
#prompt {
text-align: center;
font-weight: 500;
}
#phoneNo {
text-align: center;
}
</style>
验证OTP
<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 lang='scss'>
#verify-page-title {
font-weight: 700;
}
</style>
router / index.js
import VueRouter from "vue-router";
import firebase from "firebase";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: () => import("../views/Home")
},
{
path: "/login",
component: () => import("../views/Login"),
children: [
{
path: "",
component: () => import("../components/OTP_Request")
},
{
path: "verify",
component: () => import("../components/OTP_Verify")
}
]
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
// NAVIGATION GUARD
// 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();
// }
// });
// });
export default router;
因此,在不使用导航卫士的情况下,嵌套路由可以正常工作并呈现OTP_Verify组件。但是,当我取消注释时,OTP_Request组件将按预期方式呈现,但是当我转到路径/ login / verify时,(“主应用程序”组件)将完全为空。登录组件未呈现。我究竟做错了什么 ?
答案 0 :(得分: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();
}
});
}