为什么路由器 link 第一次不工作？

Question

我有一个grpc应用，有权限。当你开始一个项目时，你必须登录。如果你没有注册，我决定在登录按钮下添加。但是路由器不工作。只有在入口处，才能进入注册页面。请帮助理解错误是什么？为什么貌似被屏蔽了？

routes.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

for more information github repo

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

为什么路由器 link 第一次不工作？

Why does the router link not work the first time?

vue.js

vuex

vue-router

quasar