vue路由器的问题

Question

不确定我是否做错了什么。我已经成功设置vue-router但是我只有一个问题，让我解释一下：

我使用元字段来指定路由是否需要身份验证，如果用户未通过身份验证则路由器加载登录页面 "/auth/login" 当用户通过身份验证时路由器加载主页"/"。 所有路由都可以通过抽屉访问，只有三个可以通过 appBar 中的菜单访问（“pages/user”、“/admon/usuarios”、“pages/login”）

我第一次访问 "/admon/usuarios" 工作正常。从 "/" 转到 "/admon/usuarios"

如果我更改路线，一切正常：从 "/admon/usuarios" 到任何路线

当我返回 "/" 并想返回 "/admon/usuarios" 时，路由器转到 "/admon/usuarios" strong> 并立即转到 "/"，我们可以在 18:14:02 和 18:14:03 的下一张历史路由器图像中看到

这是路由器代码：

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

这是我调用 "/admon/usuarios" 时的代码片段

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

"/admon/usuarios" 的唯一方法是刷新页面，但是 行为是一样的。

我将不胜感激！

谢谢，何塞·罗德里格斯

Answer 1

好的，让我用前后解释来展示我的解决方案：

我填写菜单：

之前：

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

与：

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

和

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

之后

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

所有路线都可以正常工作！