Throubles with the vue router

Question

not sure if I am doing something wrong. I have setup vue-router successfully but I have only one problem, let me explain:

I use meta field to specify whether or not a route requires authentication, if user is not authenticated the router load login page "/auth/login" when the user is authenticated the router load main page "/". All routes can be accessed through a drawer and only three can be accessed trough a menu in an appBar ("pages/user", "/admon/usuarios", "pages/login")

The first time to I access "/admon/usuarios" works fine. from "/" go to "/admon/usuarios"

If I change the route every thing works fine: from "/admon/usuarios" to any route

When I returned to "/" and I want to return "/admon/usuarios" the router go to "/admon/usuarios" and immediately go to "/" as we can see in next image of history router at 18:14:02 & 18:14:03

This is the router code:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/pages',
    component: () => import('@/views/pages/Index'),
    children: [
      {
        name: 'Login',
        path: 'login',
        component: () => import('@/views/pages/Login'),
      },
      {
        name: 'Lock',
        path: 'lock',
        component: () => import('@/views/pages/Lock'),
      },
      {
        name: 'Register',
        path: 'register',
        component: () => import('@/views/pages/Register'),
      },
    ],
  },
  {
    path: '/',
    component: () => import('@/views/dashboard/Index'),
    meta: {
      requiresAuth: true,
    },
    children: [
      {
        name: 'Dashboard',
        path: '',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/dashboard/Dashboard'),
      },
      {
        name: 'Traslados',
        path: 'ventas/traslados',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/dashboard/Ventas/Transfers'),
      },
      {
        name: 'Paseos',
        path: 'ventas/paseos',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/dashboard/Ventas/Tours'),
      },
      {
        name: 'Circuitos',
        path: 'ventas/circuitos',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/dashboard/Ventas/Circuits'),
      },
      {
        name: 'Perfil de Usuario',
        path: 'pages/user',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/dashboard/pages/UserProfile'),
      },
      {
        name: 'Administracion de usuarios',
        path: 'configuracion/users',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/settings/usuarios/Usuarios'),
      },
    ],
  },
  {
    path: '/admon',
    meta: {
      requiresAuth: true,
    },
    component: () => import('@/views/settings/Index'),
    children: [
      {
        name: 'Administración de Usuarios',
        path: 'usuarios',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/settings/usuarios/Usuarios'),
      },
      {
        name: 'Administración de grupos',
        path: 'grupos',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/settings/usuarios/Grupos'),
      },
      {
        name: 'Catálogo de Hoteles',
        path: 'hoteles',
        meta: {
          requiresAuth: true,
        },
        component: () => import('@/views/settings/usuarios/Grupos'),
      },
    ],
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

router.beforeEach((to, form, next) => {
  const loggedIn = localStorage.getItem('user')
  if (to.matched.some((record) => record.meta.requiresAuth) && !loggedIn) {
    next('/pages/login')
  } else {
    next()
  }
})

export default router

And this is the slice of code when I call "/admon/usuarios"

middleman(action) {
      switch (action) {
        case 'userProfile':
          this.userProfile()
          break
        case 'userSettings':
          this.$router.push('/admon/usuarios')
          break
        case 'userLogout':
          this.userLogout()
          break
      }
    }

The only way to go "/admon/usuarios" si refreshing the page, but the behavior is the same.

I will appreciate any help!

Thanks, Jose Rodriguez

Answer 1

Ok, let me show my solution with a before-after explanation:

I fill menu:

Before:

<template v-for="(item, index) in profile">
  <v-divider v-if="item.divider" :key="`divider-${index}`" class="mb-2 mt-2" />

  <app-bar-item v-else :key="`item-${index}`" to="/">
    <v-list-item-content @click="middleman(item.action)">
      <v-list-item-title v-text="item.title" />
    </v-list-item-content>
  </app-bar-item>
</template>

with:

data: () => ({
    profile: [
      { title: 'Profile', action: 'userProfile' },
      { title: 'Settings', action: 'userSettings' },
      { divider: true },
      { title: 'Log out', action: 'userLogout' },
    ],
  }),

And

middleman(action) {
  switch (action) {
    case 'userProfile':
      this.userProfile()
      break
    case 'userSettings':
      this.userSettings()
      break
    case 'userLogout':
      this.userLogout()
      break
  }
},

After

<template>
  <app-bar-item>
    <v-list-item-icon class="mr-2">
      <v-icon>mdi-account</v-icon>
    </v-list-item-icon>
    <v-list-item-title @click="userProfile">Profile</v-list-item-title>
  </app-bar-item>
  <app-bar-item>
    <v-list-item-icon class="mr-2">
      <v-icon>mdi-account</v-icon>
    </v-list-item-icon>
    <v-list-item-title @click="userSettings">Settings</v-list-item-title>
  </app-bar-item>
  <app-bar-item>
    <v-list-item-icon class="mr-2" @click="userLogout">
      <v-icon>
        mdi-power
      </v-icon>
    </v-list-item-icon>
    <v-list-item-title>
      Logout
    </v-list-item-title>
  </app-bar-item>
</template>

All routes works fine!