06｜命名路由与命名视图

第六章概览 / 06。目标：name 标识导航目标，components 把同一 route record 分配给同层多个出口；两种“命名”解决不同问题。

route name 是稳定导航接口

{
  path: '/users/:id',
  name: 'user-detail',
  component: UserView,
}

router.push({ name: 'user-detail', params: { id: '42' } })

修改 path 为 /members/:id 时，按 name 导航的调用方无需改字符串。name 在整个 router 中应唯一，并适合被链接、守卫、测试和埋点引用。导航到不存在的 name 会抛错，不会悄悄得到空页面。

name 不应承载页面标题或权限；这些属于 meta。大型项目可用命名约定（如 settings.profile），但命名空间只是团队规则，不是 Router 自动创建的层级。

named views 是同一深度的多个出口

const routes = [
  {
    path: '/inbox',
    name: 'inbox',
    components: {
      default: () => import('./views/InboxView.vue'),
      sidebar: () => import('./views/InboxSidebar.vue'),
      helper: () => import('./views/InboxHelp.vue'),
    },
    props: {
      default: route => ({ folder: route.query.folder ?? 'all' }),
      sidebar: false,
      helper: { compact: true },
    },
  },
]

<!-- App.vue，同一层的三个出口 -->
<template>
  <aside><RouterView name="sidebar" /></aside>
  <main><RouterView /></main>
  <section aria-label="帮助"><RouterView name="helper" /></section>
</template>

route record 使用复数 components；未命名 RouterView 对应 default。每个组件都由同一个 URL/record 装配，但仍各自拥有局部状态和生命周期。props 对 named views 也要按出口名称分别配置。

nested named views 要数清深度

若 SettingsLayout 是父 route 的 default component，那么它内部的 <RouterView name="helper"> 接收的是 child record 的 components.helper，不是父 record 的 helper。出口名称只在当前 view 深度解析；画出 record 链和每层出口比猜测有效。

App RouterView(default) ──> SettingsLayout（父 record）
SettingsLayout RouterView(default/helper) ──> child.components（子 record）

什么时候不该用 named views

如果 sidebar/helper 在所有页面都固定，直接作为 App/Layout 普通组件更简单；如果它们只根据少量 props 变化，也不必让 Router 同时装配。named views 适合一个位置确实选择多块路由内容的工作台、邮箱、三栏详情。

多个路由组件共享远程数据时，不要各自重复 fetch。让上层缓存/领域服务拥有数据，三个 view 按 key 消费；任何一个 view 的加载失败也要定义整体页面是否可用。

常见失败路径

• route record 写 component，模板却等待 name="sidebar"：只有 default 出口有内容。
• route name 重复：动态 addRoute 时旧 name 可能被移除/替换，导航目标不稳定。
• 每个 named view 都监听整个 route 并请求：一次 query 变化产生三组重复请求。
• 把全局常驻导航做成 named view：路由表承担了不需要的位置决策。
• 三个区域各自维护“当前选中项”：同一 URL 出现三个 owner；身份应来自 params/query 或共享领域状态。

练习：三栏订单页

创建命名路由 order-workbench，path /orders/:id，同层输出 default 详情、sidebar 订单列表、helper 操作帮助。三个 view 通过各自 props 配置取得需要的最小输入；只允许详情请求当前订单，sidebar 从共享列表缓存读取。

验收：改 path 后按 name 的导航不变；缺失 helper component 时只该区域为空且页面核心仍可用；不存在 name 的导航被测试捕获为异常。

参考答案：第 06 题。

本页结论

route name 解耦“目标”与 URL；view name 连接 record 与同层出口。前者是全局导航身份，后者是局部布局装配点。