Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）

---

前言

除了 path 之外，你还可以为任何路由提供 name。
在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。

---

一、定义使用命名路由

示例：

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User,
  },
]
1
2
3
4
5
6
7
8

在这个例子中，我们给路径为 /user/:username的路由命名为 user。
要链接到一个命名的路由，可以向 router-link 组件的 to 属性传递一个对象：

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>
1
2
3
4

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { username: 'erina' } })
1

在这两种情况下，路由将导航到路径 /user/erina。

二、命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

代码如下（示例）：

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

1
2
3
4
5

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写---很重要
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

来个复杂点的嵌套命名视图：
我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例：

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+
1
2
3
4
5
6
7
8
9
10

• Nav 只是一个常规组件。

• UserSettings 是一个视图组件。

• UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。

注意：我们先忘记 HTML/CSS 具体的布局的样子，只专注在用到的组件上。
UserSettings 组件的 部分应该是类似下面的这段代码:

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar />
  <router-view />
  <router-view name="helper" />
</div>
1
2
3
4
5
6
7
8

那么你就可以通过这个路由配置来实现上面的布局：

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

总结

命名路由是 Vue Router 提供的一个非常实用的功能，它可以帮助你更好地组织和管理应用中的路由。
命名路由的好处：
可读性： 使用路由名称而不是路径，使得代码更加直观和易于理解。
维护性： 如果路由路径发生变化，只需要修改路由配置，而不用到处替换字符串路径。
参数传递： 在使用命名路由时，可以更方便地传递参数，特别是路径参数。

命名视图是 Vue Router 提供的一个强大的功能，它可以帮助你创建复杂的页面布局，并且使得路由管理更加灵活和高效。
命名视图的好处：
布局管理： 命名视图允许你在一个路由中灵活地组合和管理多个组件，这对于页面布局非常有用。
组件复用： 你可以在不同的路由中使用相同的命名视图，从而复用组件。
代码组织： 通过命名视图，你可以更好地组织代码，使得路由配置更加清晰。

人生就像一本书，愚蠢的人匆匆翻过，聪明的人细细品读