为什么路由器链路第一次不工作?

Question

我有一个grpc应用程序，有授权。启动项目时，您必须登录。如果您尚未注册，我决定在登录按钮下添加。但是路由器不工作。仅在入口处，转到注册页面。请帮助了解错误是什么？为什么看似被封锁？

路线.js

const routes = [
{
path: "/",
component: () => import("layouts/MainLayout"),
children: [
{
path: "",
component: () => import("pages/Index"),
meta: { requireAuth: true }
},
{
path: "/logs",
component: () => import("pages/Logs"),
meta: { requireAuth: true, admin: true }
}
]
},
{
path: "/",
component: () => import("layouts/AuthLayout"),
children: [
{
path: "/welcome",
component: () => import("pages/Auth"),
meta: { guest: true }
},
{
path: "/register",
component: () => import("pages/Register"),
meta: { guest: true }
}
]
}
];

我尝试了很多东西，比如在Auth.vue中：

<q-item to='/register'>Sign Up</q-item> 
<router-link tag="a" :to="{path:'/register'}" replace>Go</router-link>
<span @click="callSomeFunc()">Register</span>
...
methods: {
callSomeFunc() {
this.$router.push({ path: "/register" });
}

我在 App.vue 中的路由器视图

有关更多信息，GitHub 存储库

Answer 1

您的配置中有重复的路由 - 路径/用于 2 个路由。您应该解决此问题。

为了防止未经授权的用户看到您受保护的页面，您可以通过beforeEach挂钩向路由器添加全局导航保护：

import VueRouter from 'vue-router';
const routes = [
{
path: "/",
component: () => import("layouts/MainLayout"),
meta: { requireAuth: true },
children: [
{
path: "",
component: () => import("pages/Index"),
},
{
path: "logs",
component: () => import("pages/Logs"),
meta: { admin: true }
}
]
},
{
path: "/login",
component: () => import("layouts/AuthLayout"),
children: [
{
path: "",
component: () => import("pages/Auth"),
},
{
path: "/register",
component: () => import("pages/Register"),
}
]
}
];
const router = new VueRouter({
routes
});
router.beforeEach((to, from, next) =>
{
if (to.matched.some(route => route.meta.requireAuth))
{
if (userNotLogged) next('/login');
else next();
}
else next();
});

export default router;

您也可以考虑阅读更详细的教程，例如 https://www.digitalocean.com/community/tutorials/how-to-set-up-vue-js-authentication-and-route-handling-using-vue-router