【Vue Router】Sensitive 与 strict 路由配置

**Vue Router 的路由配置**

在 Vue Router 中，路由配置是非常重要的一部分。它决定了应用程序的 URL 结构以及如何响应用户的导航请求。在本文中，我们将讨论两种常见的路由配置方式：`Sensitive` 和 `strict`。

###1. Sensitive 路由配置`Sensitive` 是 Vue Router 中一种较为宽松的路由配置方式。它允许 URL 中的参数和路径名不完全匹配，仍然可以正确解析并跳转到相应的组件。

**示例代码**

htmlconst router = new VueRouter({
 mode: 'history',
 base: '/my-app/',
 routes: [
 {
 path: '/',
 name: 'home',
 component: Home },
 {
 path: '/about/:id',
 name: 'about',
 component: About }
 ]
})

在上面的示例中，我们定义了一个路由配置，包含两个路由：`/` 和 `/about/:id`。注意到 `:id` 是一个参数，它可以被匹配为任意值。

**如何使用**

html<template>
 <div>
 <router-link to="/about/123">关于</router-link>
 </div>
</template>

<script>
export default {
 methods: {
 goAbout(id) {
 this.$router.push({ name: 'about', params: { id } })
 }
 }
}
</script>

在上面的示例中，我们使用 `router-link` 组件跳转到 `/about/123`，并且使用 `$router.push()` 方法跳转到 `/about/:id`。

###2. Strict 路由配置`Strict` 是 Vue Router 中一种较为严格的路由配置方式。它要求 URL 中的参数和路径名必须完全匹配，否则将无法正确解析并跳转到相应的组件。

**示例代码**

htmlconst router = new VueRouter({
 mode: 'history',
 base: '/my-app/',
 routes: [
 {
 path: '/',
 name: 'home',
 component: Home },
 {
 path: '/about/:id(d+)',
 name: 'about',
 component: About }
 ]
})

在上面的示例中，我们定义了一个路由配置，包含两个路由：`/` 和 `/about/:id(d+)`。注意到 `:id(d+)` 是一个参数，它要求匹配为正整数。

**如何使用**

html<template>
 <div>
 <router-link to="/about/123">关于</router-link>
 </div>
</template>

<script>
export default {
 methods: {
 goAbout(id) {
 this.$router.push({ name: 'about', params: { id } })
 }
 }
}
</script>

在上面的示例中，我们使用 `router-link` 组件跳转到 `/about/123`，并且使用 `$router.push()` 方法跳转到 `/about/:id(d+)`。

### 总结Vue Router 的路由配置是非常重要的一部分。`Sensitive` 和 `strict` 是两种常见的路由配置方式，它们决定了应用程序的 URL 结构以及如何响应用户的导航请求。在本文中，我们讨论了这两种路由配置方式的使用方法和示例代码。

**参考**

* Vue Router 文档： />* Vue Router GitHub：