如何在Vue Router中设置动态基础路由？

针对你需要设置domain/t/{id}/...这种动态前缀路由的需求，Vue Router本身的base参数确实只支持静态字符串，但可以通过以下几种方式实现类似效果：

方案一：嵌套路由（推荐） #

把动态前缀部分作为顶层父路由，所有业务路由作为它的子路由，这是最符合Vue Router设计理念的方式：

// 定义路由时，将动态前缀作为父路由
const routes = [
  {
    path: '/t/:id',
    // 用一个空的占位组件承载子路由视图
    component: { template: '<router-view />' },
    children: [
      // 这里放置你原来的所有路由，路径不用加前缀，会自动继承父路由的/t/:id
      { path: 'dashboard', component: Dashboard },
      { path: 'profile', component: Profile },
      { path: '', redirect: 'dashboard' }, // 可选：设置/t/{id}的默认跳转
      // ...其他业务路由
    ]
  },
  // 可选：处理无前缀的路径，重定向到默认id的路由
  { path: '/:pathMatch(.*)', redirect: '/t/default-id/dashboard' }
]

const router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 }),
  routes,
  history: createWebHistory() // 这里不需要设置base
})

优势 #

• 结构清晰，完全遵循Vue Router的嵌套路由规则
• 可以直接通过useRoute().params.id获取动态id
• 无需额外的守卫或全局逻辑，维护成本低

方案二：初始化时动态设置base #

如果你的动态id可以在应用初始化时获取到（比如从URL参数、localStorage或接口返回），可以先提取id再创建router实例：

// 初始化前先从URL中解析动态id
const pathSegments = window.location.pathname.split('/')
// 假设URL格式是/t/{id}/xxx，提取第二个分段的id
const dynamicId = pathSegments[2] || 'default-id'
const dynamicBase = `/t/${dynamicId}`

const router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 }),
  routes,
  history: createWebHistory(dynamicBase)
})

注意事项 #

• 这种方式的base是初始化时固定的，如果后续id需要变化（比如从/t/123切换到/t/456），需要重新创建router实例，适合id在会话期间不会改变的场景

方案三：全局路由守卫处理前缀校验 #

如果不想修改原有路由结构，可以通过全局前置守卫来确保所有路由都带上动态前缀：

const router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 }),
  routes,
  history: createWebHistory()
})

router.beforeEach((to, from, next) => {
  // 检查目标路径是否已包含/t/{id}前缀
  const hasDynamicPrefix = /^\/t\/[^/]+/.test(to.path)
  
  if (!hasDynamicPrefix) {
    // 从你需要的来源获取动态id（比如store、localStorage、接口）
    const targetId = '123' // 替换成实际的动态id来源
    // 重定向到带前缀的路径
    next(`/t/${targetId}${to.path}`)
    return
  }
  
  // 提取id并做后续处理（比如存入状态管理）
  const currentId = to.path.split('/')[2]
  // store.commit('SET_CURRENT_ID', currentId)
  
  next()
})

优势与不足 #

• 无需修改原有路由结构，快速适配
• 每次路由跳转都要执行校验逻辑，有轻微性能开销；且需要处理重定向的边界情况（比如避免无限重定向）

内容的提问来源于stack exchange，提问作者S.M. Shakil