Why does the router link not work the first time?

Question

I have a grpc application, there is authorization. When you start a project, you must be logged in. I decided to add under the login button if you are not registered. But the router does not work. Only at the entrance, go to the registration page. Please help to understand what is the mistake? Why is seemingly blocked?

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 }
      }
    ]
  }
];

I tried many things, like in 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" });
  }

My router-view in App.vue

for more information github repo

Answer 1

You have duplicate routes in your config - the path / is used on 2 routes. You should fix this.

To prevent unauthorized users to see your protected pages you can add a global navigation guard to your router through the beforeEach hook:

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;

You may also consider reading a more verbose tutorial, e.g. https://www.digitalocean.com/community/tutorials/how-to-set-up-vue-js-authentication-and-route-handling-using-vue-router