Question

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

我使用meta字段来指定路由是否需要认证，如果用户未通过认证，则路由器负载登录页面“ / auth / login” “ /” 。所有路径都可以通过抽屉访问，而通过appBar中的菜单只能访问三个路径（“页面/用户”，“ / admon / usuarios”，“页面/登录”）

我第一次访问“ / admon / usuarios” 正常。从“ /” 转到“ / admon / usuarios”

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

当我返回到“ /” 并且要返回“ / admon / usuarios” 时，路由器将转到“ / admon / usuarios” 并立即转到“ /” ，正如我们在历史路由器的下一张图片中看到的那样：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” 的唯一方法是刷新页面，但是行为是相同的。

我将不胜感激！

谢谢Jose Rodriguez

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>

所有路线都正常！

vue路由器遇到的问题

1 个答案: