如何在Vue.js 3中捕获所有以admin开头的路由

你尝试的 /admin* 是 vue-router@3 及更早版本的通配符语法，Vue 3 配套的 vue-router@4 调整了通配符匹配规则，不再支持直接在路径后加 * 的写法，按以下两种方案配置即可生效：

方案1：嵌套路由（推荐，适配导航抽屉需求） #

该方案可以直接把导航抽屉写在admin父路由的公共布局组件中，所有子路由天然共享抽屉组件，无需额外做路由判断，是同类需求的最佳实践：

// router/index.js 配置示例
import { createRouter, createWebHistory } from 'vue-router'
// AdminLayout 组件内编写导航抽屉代码，再添加 <router-view> 标签渲染子页面内容
import AdminLayout from '@/layout/AdminLayout.vue'

const routes = [
  // 其他非admin路由配置...
  {
    path: '/admin',
    component: AdminLayout,
    children: [
      // 匹配 /admin 根路径
      { path: '', component: () => import('@/views/admin/Index.vue') },
      // 匹配 /admin/users
      { path: 'users', component: () => import('@/views/admin/UserList.vue') },
      // 匹配 /admin/users/10 这类带参数的路径
      { path: 'users/:id', component: () => import('@/views/admin/UserDetail.vue') },
      // 可选：匹配/admin下所有未定义的路径做兜底
      { path: ':pathMatch(.*)*', component: () => import('@/views/404.vue') }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

方案2：单路由通配符匹配所有/admin开头路径 #

如果你需要用单个路由捕获所有/admin开头的路径，使用/admin/:pathMatch(.*)*语法即可：

const routes = [
  {
    path: '/admin/:pathMatch(.*)*',
    component: () => import('@/views/AdminPage.vue')
  }
]

该配置可覆盖你提到的所有路径：/admin、/admin/users、/admin/users/10，匹配到的路径后缀可以通过$route.params.pathMatch获取，比如访问/admin/users/10时，$route.params.pathMatch的值为['users', '10']。

内容的提问来源于stack exchange，提问作者banky