使用导航保护时未呈现嵌套的Vue组件

Question

这是我第一次提出这样的问题，所以请原谅我所犯的任何错误。

我的代码如下

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组件按预期呈现，但是当我转向路径/登录/验证时，(主App )完全是空的。没有呈现Login组件。我做错什么了？

Answer 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();
     }
   });
 }