vue路由器的问题

Posted 2023-03-16

【中文标题】vue路由器的问题

【英文标题】：Throubles with the vue router

【发布时间】：2020-09-09 21:41:38

【问题描述】：

不确定我是否做错了什么。我已经成功设置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" 的唯一方法是刷新页面，但是 行为是一样的。

我将不胜感激！

谢谢，何塞·罗德里格斯

【问题讨论】：

你为什么要测试 to.matched.some((record) => record.meta.requiresAuth 而不是 to.meta.requiresAuth？

你好@MatheusValenza。老实说，因为我是 vuejs 的新手

没问题兄弟！！但是看看here。 to.matched 实际上返回“to”路由的所有嵌套路径段，我猜你不想要它。请尝试使用to.meta.requiresAuth 并告诉我发生了什么

好的，谢谢，让我试试，当然我会告诉你

您好，我再次尝试使用 (to.meta.requiresAuth && !loggedIn) 并且行为是相同的，只是 /admon/usuarios 效果不佳

【参考方案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>

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