Vue Router 中路由命名、编程式导航以及重定向和别名

Vue Router 中路由命名、编程式导航、命名视图以及重定向和别名

[TOC]

## 命名路由

这个很好理解就是在路由配置时给路由添加一个名称，这样除了可以通过 router-link 的 to url 还可以通过名称来使用，例如`:to="{一个路由对象}"`,代码示例如下

当创建一个路由时，我们可以选择给路由一个 name：

```js
const routes = [
  {
    path: '/user/:username',
    name: 'profile',
    component: User,
  },
]
```

然后我们可以使用 name 而不是 path 来传递 to 属性给 `<router-link>`：

```html
<router-link :to="{ name: 'profile', params: { username: 'erina' } }">
  User profile
</router-link>
```

使用 name 有很多优点：[没有硬编码的 URL。]、[params 的自动编码/解码。]、[防止你在 URL 中出现打字错误。]、[绕过路径排序，例如展示一个匹配相同路径但排序较低的路由。（有点用其它的没感觉）]

> Tips：所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名，路由器只会保留最后那一条。

[========]

## 编程式导航

除了使用 `<router-link>` 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现，例如`router.psuh`方法，详细的请跳转[router.psuh](/admin/Blog/SeeMarkdown?id=1479#push)

当你点击 `<router-link>` 时，内部会调用这个方法，所以点击 `<router-link :to="...">` 相当于调用 router.push(...) ：

|声明式|编程式|
|--|--|
|`<router-link :to="...">`|router.push(...)|

属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。

[========]

## 替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

|声明式|编程式|
|--|--|
|`<router-link :to="..." replace>`|router.replace(...)|

也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：

```js
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
```

[========]

## 横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于`window.history.go(n)`

```js
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
```

[========]

## 篡改历史

Vue Router 的导航方法，就是对浏览器原生 [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 的「封装和增强」，无论你用哪种路由模式（hash / history），路由跳转代码永远不用改。

+ Vue Router 的 `push/replace/go` **完全对应**浏览器原生 History API，功能一致、用法相似；
+ 统一 API 是核心：无论路由模式是 Hash / Web History，跳转代码完全不用修改；
+ 开发中你只需要记住：**直接用 router.push 等方法，不用关心底层实现**。

| Vue Router 方法 | 浏览器原生 History API | 核心作用 | 开发场景 |
|----------------|------------------------|----------|----------|
| `router.push()` | `history.pushState()` | **新增**一条历史记录 | 跳转到新页面（点击菜单、跳转详情） |
| `router.replace()` | `history.replaceState()` | **替换**当前历史记录 | 登录后替换页面、不允许回退的场景 |
| `router.go(n)` | `history.go(n)` | **前进/后退**历史记录 | 返回上一页、返回前两页 |

举例：

```javascript
// Vue Router 写法（我们日常用的）
this.$router.push('/home')
this.$router.replace('/login')
this.$router.go(-1) // 返回上一页

// 浏览器原生写法（底层真正执行的）
window.history.pushState({}, '', '/home')
window.history.replaceState({}, '', '/login')
window.history.go(-1)
```

✅ **关键点**：
Vue Router 没有自己发明新的历史记录机制，**完全复用浏览器原生能力**，所以你用原生 API 的经验可以直接平移到 Vue Router 里。

### 历史记录不会因为路由history的配置发生改变

Vue Router 有两种核心模式，靠 `history` 配置区分：

+ **Web History 模式**（`createWebHistory`）：路径像 `/home`，美观，需要后端配置
+ **Hash 模式**（`createWebHashHistory`）：路径像 `/#/home`，兼容性好，无需后端配置

```javascript
// 路由实例创建（两种模式二选一）
// 模式1：Web History
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 模式2：Hash
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
```

**不管你选上面哪种模式，你的跳转代码 1 行都不用改！**

```javascript
// 无论用 history 还是 hash 模式
// 下面这三行代码，永远、永远、永远正常运行！
router.push('/user')
router.replace('/pay')
router.go(-1)
```

这就是 Vue Router 做的**核心封装价值**：
屏蔽底层模式差异，给你统一的上层 API，你只管写业务跳转，不用关心底层是怎么实现的。

### 为什么要这么设计

1. **降低学习成本**
   你会浏览器原生 History，就直接会 Vue Router，不用重新学一套规则。

2. **项目迁移零成本**
   项目初期用 Hash 模式，后期想换成美观的 History 模式？
   ✅ 只改路由创建的一行配置，**所有跳转代码完全不动**。

3. **避免兼容性问题**
   原生 API 在不同浏览器有细微差异，Vue Router 内部帮你抹平了，你直接用统一方法就行。

4. **功能更强大**
   除了模拟原生 API，Vue Router 还加了很多增强：
   - 支持命名路由 `push({ name: 'Home' })`
   - 支持查询参数 `push({ path: '/user', query: { id: 1 } })`
   - 支持导航守卫、异步路由等高级能力

> **最终通俗总结：**
你可以把 Vue Router 看成**浏览器历史记录的「智能遥控器」**：
- 底层还是电视（浏览器原生 History API）在工作
- 遥控器（Vue Router 方法）按键统一（push/replace/go）
- 不管你接的是机顶盒（Hash 模式）还是有线电视（Web History 模式）
- 遥控器按键永远通用，不用换遥控器

[========]

## 重定向

重定向也是通过 routes 配置来完成，下面例子是从 /home 重定向到 /：

```js
const routes = [{ path: '/home', redirect: '/' }]
```

重定向的目标也可以是一个命名的路由：

```js
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
```

甚至是一个方法，动态返回重定向目标：

```js
const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]
```

请注意，导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在上面的例子中，在 /home 路由中添加 beforeEnter 守卫不会有任何效果。

在写 redirect 的时候，可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。唯一的例外是嵌套路由：如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

### 相对重定向

相对重定向它更像一个**规则**：告诉Vue Router不要去一个全新的地址，而是在当前地址的“上下文”内，找到一个新目标。相对重定向是一种利用当前路由信息，通过相对路径或函数动态决定目标路径的重定向方式。它不只是简单替换参数，其核心在于**继承父级上下文**，这对于构建灵活、健壮的嵌套路由结构至关重要。听起来有点抽象，我用绝对重定向来做个对比，你一看就明白了：

**绝对重定向 vs. 相对重定向：一个例子就懂**

假设有一个用户个人主页路由 `/users/:userId`，你想让访问其旧版路径 `/u/:userId` 的人自动跳转过来。

+ **绝对重定向**：像 GPS 一样，直接给一个完整路径。
```javascript
{ path: '/u/:userId', redirect: '/users/:userId' } // ✅ 直接写死目标
```

+ **相对重定向**：像告诉对方“你旁边那家店”，不提供全路径，而是依赖“当前位置”。
```javascript
{ path: '/users/:userId/posts', redirect: 'profile' }
// 👆 这里 'profile' 是一个相对路径
// 效果：当用户访问 /users/123/posts 时，会被重定向到 /users/123/profile
```

相对重定向的核心在于**继承**：它能自动沿用原路径中的参数（比如 `:userId`），并帮你构建新路径。这种方式让路由配置更健壮，如果父级路径修改，子路径的重定向规则依然有效。

#### 强大的重定向函数

Vue Router 还提供了更灵活的方式，可以直接操作原路径。比如，你想把所有 `posts` 结尾的路径重定向到 `profile`：

```javascript
{
  path: '/users/:userId/posts',
  redirect: to => {
    // to.path 就是当前路径，你可以对它进行任何字符串操作
    return to.path.replace(/posts$/, 'profile')
  }
}
```

这个函数让你能根据当前路由的 `params`、`query` 等信息，动态决定重定向的目标。

#### 三种重定向方式

为了让你有更清晰的全局观，这里对比一下三种常见的重定向方式：

| 重定向方式 | 配置示例 | 说明 |
| :--- | :--- | :--- |
| **绝对重定向** | `redirect: '/users/123/profile'` | 跳转到**绝对路径**。无论从哪里触发，都会去这个确切地址。 |
| **相对重定向** | `redirect: 'profile'` | 基于当前路由的父级路径来计算新路径，通常会继承当前路径的参数。 |
| **动态重定向** | `redirect: to => { ... }` | 通过**函数**来决定，逻辑最灵活。可以访问完整的 `to` 路由对象，实现复杂判断。 |

#### 典型应用场景：嵌套路由

相对重定向最常见的使用场景是在复杂的嵌套路由结构中。比如一个博客系统，你可以这样配置：

```javascript
const routes = [
  {
    path: '/posts/:postId', // 父级路由
    component: PostLayout,
    children: [
      // 当访问 /posts/123 时，重定向到 /posts/123/details
      { path: '', redirect: 'details' },
      { path: 'details', component: PostDetails },
      { path: 'comments', component: PostComments },
    ]
  }
]
```

这样配置后，访问文章页的根路径（`/posts/123`）时，会自动显示其 `details` 子页面，非常方便。

[示例演示](http://vue.cylyccjy.com/routerRedirect)

[========]

## 别名

重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。那么什么是别名呢？

将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。

上面对应的路由配置为：

```js
const routes = [{ path: '/', component: Homepage, alias: '/home' }]
```

通过别名，你可以自由地将 UI 结构映射到一个任意的 URL，而不受配置的嵌套结构的限制。使别名以 / 开头，以使嵌套路径中的路径成为绝对路径。你甚至可以将两者结合起来，用一个数组提供多个别名：

```js
const routes = [
  {
    path: '/routerAlias', alias: '/ra', name: 'routerAlias', component: () => import('@routerView/routerAlias.vue'), children: [
            { path: 'routerAliasList', name: 'routerAliasList', component: () => import('@routerView/routerAliasList.vue'),
                alias: ['/ralist', 'ral'] }
        ]
  },
]
```

> 注意：访问别名后，浏览器地址栏和 route.path 都会显示/变成别名路径
```HTML
<RouterLink :class="{ 'active': route.path === '/routerAlias/routerAliasList' }" to="/ralist">数组别名</RouterLink>
```
当通过 /ralist 访问时：
+ 浏览器地址栏：http://domain.com/ralist
+ route.path：/ralist
+ 实际匹配的路由：/routerAlias/routerAliasList

如果你的路由有参数，请确保在任何绝对别名中包含它们：

```js
const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]
```

[示例演示](http://vue.cylyccjy.com/routerAlias)

> **Tips：重定向 vs. 别名**
+ 重定向 (Redirect)：地址栏 URL 会变，浏览器的历史记录也会更新。
+ 别名 (Alias)：URL 不会变，但页面内容会变成另一个组件的，就像给路由起了个“艺名”。