如何在Nuxt中单次定义路由适配独立/子路由多上下文场景？

1. 抽离复用的路由配置片段 #

先把EventCreate的核心配置抽成独立对象，避免重复编写组件、props等相同配置：

// 抽离可复用的路由核心配置
const eventCreateBaseConfig = {
  component: EventCreate,
  props: true
}

2. 分别注册子路由与独立路由 #

在路由配置中，通过扩展这个基础配置，分别添加作为admin子路由和独立路由的条目，仅修改path和唯一的name（避免路由冲突）：

{
  path: "/admin",
  name: "admin",
  component: Admin,
  children: [
    // 作为admin子路由（相对路径，自动拼接父路由path得到 /admin/event/create）
    {
      ...eventCreateBaseConfig,
      path: "event/create",
      name: "EventCreateAdmin"
    }
    // 其他子路由...
  ]
},
// 独立访问的路由
{
  ...eventCreateBaseConfig,
  path: "/event/create",
  name: "EventCreateStandalone"
}

3. 保留的使用 #

这种方式完全不影响Admin组件中<NuxtChild :key="$route.path" />的原有逻辑：访问/admin/event/create时，会通过Admin的侧边栏布局渲染EventCreate；访问/event/create时，则直接渲染独立的EventCreate组件。

额外优化：统一路由跳转逻辑 #

如果需要在代码中统一跳转逻辑，可以通过判断当前上下文选择对应的路由name，或者在组件内通过$route.matched判断是否处于admin路由层级：

// 在任意组件中根据场景跳转
const goToEventCreate = (isAdminContext) => {
  this.$router.push({ name: isAdminContext ? 'EventCreateAdmin' : 'EventCreateStandalone' })
}

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