大强博客

它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。上面的例子有两个假设：第一，新添加的路由记录将与 to 位置相匹配，实际上导致与我们试图访问的位置不同。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。

如果导航被阻止，导致用户停留在同一个页面上，由 router.push 返回的 Promise 的解析值将是 Navigation Failure。正如我们在一开始所说的，有不同的情况会导致导航的中止，所有这些情况都会导致不同的 Navigation Failure。Navigation Failure 是带有一些额外属性的 Error 实例，这些属性为我们提供了足够的信息，让我们知道哪些导航被阻止了以及为什么被阻止了。当在导航守卫中返回一个新的位置时，我们会触发一个新的导航，覆盖正在进行的导航。

RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// 如果使用 TypeScript，请添加 @ts-ignore。

component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。如果你使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 正确地解析语法。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。// 或在路由定义里直接使用它。

要做到这一点，你可以返回一个 Promise，它可以返回所需的位置描述符。使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。我们可以将其与页面级过渡组件的事件挂钩，以使滚动行为与你的页面过渡很好地结合起来，但由于使用场景可能存在的差异和复杂性，我们只是提供了这个基础来实现特定的用户场景。如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。// 始终滚动到顶部。

上面的用法会对所有的路由使用相同的过渡。Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以添加一个 key 属性来强制过渡。我们可以添加一个 after navigation hook，根据路径的深度动态添加信息到 meta 字段。也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。-- 使用任何自定义过渡和回退到 `fade` -->Transition 的 API 在这里同样适用。-- 使用动态过渡名称 -->

当在处理 KeepAlive 组件时，我们通常想要保持路由组件活跃，而不是 RouterView 本身。实践中通常不会这么做，因为这样会导致所有路由组件都使用相同的 props 和插槽。请查阅传递 props 给路由组件获取其他传递 props 的方式。而如果我们将引用放在 <router-view> 上，那引用将会被 RouterView 的实例填充，而不是路由组件本身。上面的代码等价于不带插槽的 <router-view />，但是当我们想要获得其他功能时，插槽提供了额外的扩展性。

请注意，在模板中我们仍然可以访问 $router 和 $route，所以如果你只在模板中使用这些对象的话，是不需要 useRouter 或 useRoute 的。Vue 的组合式 API 的引入开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。组合式 API 守卫也可以用在任何由 <router-view> 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。// 用在链接里的 href。// 导航至该链接的函数。

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 用获取数据的工具函数 / API 包裹器替换 `getPost`// 侦听路由的参数，以便再次获取数据。// 侦听路由的参数，以便再次获取数据。

我们需要遍历这个数组来检查路由记录中的 meta 字段，但是 Vue Router 还为你提供了一个 route.meta 方法，它是一个非递归合并所有 meta 字段（从父字段到子字段）的方法。这意味着你可以简单地写。例如，根据上面的路由配置，/posts/new 这个 URL 将会匹配父路由记录 (path: '/posts') 以及子路由记录 (path: 'new')。// 这段可以直接添加到你的任何 `.ts` 文件中，例如 `router.ts`// 也可以添加到一个 `.d.ts` 文件中。

这和 router.beforeEach 类似，因为它在每次导航时都会触发，不同的是，解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。示例中的 beforeEnter 在 /user/list 和 /user/details 之间移动时不会被调用，因为它们共享相同的父级路由。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，

由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。另外，如果你使用的是 Node.js 服务器，你可以通过在服务器端使用路由器来匹配传入的 URL，如果没有匹配到路由，则用 404 来响应，从而实现回退。不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。虽然不推荐，你仍可以在浏览器应用程序中使用此模式，但请注意它不会有历史记录，这意味着你无法后退或前进。

如果当前路径是 /user/erina/role/admin，那么这两个链接都会被认为是匹配当前路由的，因此 router-link-active 类会应用于这两个链接。RouterLink 组件会为匹配当前路由的链接添加两个 CSS 类，router-link-active 和 router-link-exact-active。我们也许想对这个列表中匹配当前路由的链接进行视觉区分。如果你使用了嵌套路由，任何指向祖先路由的链接也会被认为是匹配当前路由的，只要相关的 params 匹配。

在你的组件中使用 $route 或 useRoute() 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。通常这并不是一个好主意，因为这意味着所有的视图组件都声明了一个 view-prop prop，但这未必需要。如果你需要状态来定义 props，请使用包装组件，这样 vue 才可以对状态变化做出反应。当 props 是一个对象时，它将原样设置为组件 props。当 props 设置为 true 时，route.params 将被设置为组件的 props。

通过别名，你可以自由地将 UI 结构映射到一个任意的 URL，而不受配置的嵌套结构的限制。使别名以 / 开头，以使嵌套路径中的路径成为绝对路径。将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。// 将总是把/users/123/posts重定向到/users/123/profile。重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。// return 重定向的字符串路径/路径对象。

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。注意：我们先忘记 HTML/CSS 具体的布局的样子，只专注在用到的组件上。

你可能已经注意到，router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。// 带查询参数，结果是 /register?

Vue Router 有很多其他部分可以传入网址，例如 router.push() 和 router.replace() 方法。我们将在编程式导航指南中详细介绍这些方法。所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名，路由器只会保留最后那一条。你可以在动态路由章节了解更多。上述示例将创建一个指向 /user/erina 的链接。

例如，你想导航 /user/:id 而不显示嵌套路由。此时，按照上面的配置，当你访问 /user/eduardo 时，在 User 的 router-view 里面什么都不会呈现，因为没有匹配到嵌套路由。这对于将具有公共路径前缀的路由分组在一起或使用更高级的功能时很有用，例如：路由独享的守卫或路由元信息。// UserProfile 将被渲染到 User 的 <router-view> 内部。// 当 /user/:id/profile 匹配成功。// 当 /user/:id/posts 匹配成功。

例如，路由 /users 将匹配 /users、/users/、甚至 /Users/。// 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/// /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等。// /:chapters -> 匹配 /one, /one/two, /one/two/three, 等。// - /users/posva/ 当 strict: true。

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。Vue Router 使用自己的路径匹配语法，其灵感来自于 express，因此它支持许多高级匹配模式，如可选的参数，零或多个 / 一个或多个，甚至自定义的正则匹配规则。// 将匹配以 `/user-` 开头的所有内容，并将其放在 `route.params.afterUser` 下。// 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。

在演练场的示例里，我们使用了 createMemoryHistory()，它会完全忽略浏览器的 URL 而使用其自己内部的 URL。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。在演练场示例中的 HomeView.vue 组件中，路由器就是这样获取的。上述通过 create-vue 创建的示例项目使用了与我们在这里看到的类似的功能，对于探索后续介绍的其他功能而言，也许你会觉得这是一个不错的起点。

你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。Vue Router 是 Vue.js 的官方路由。使用包管理器的项目通常会使用 ES 模块来访问 Vue Router，例如 import { createRouter } from 'vue-router'。如果您选择安装 Vue Router，示例应用还将演示 Vue Router 的一些核心特性。