《Vue Router官方教程》

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

• 第一章 Vue Router的安装
• Vue Router的安装有多种形式，这里面主要介绍三种。一.直接下载到本地或者通过CDNhttps://unpkg.com/vue-router@4 Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 https://unpkg.com/vue-router@4.0
• 第二章 Vue Router基础知识
• 2.1 入门
• 用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子： HTML <script src="https://unpkg.com/vue@3"></scrip
• 2.2 动态路由匹配
• 带参数的动态路由匹配 很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径
• 2.3 路由的匹配语法
• 大多数应用都会使用 /about 这样的静态路由和 /users/:userId 这样的动态路由，就像我们刚才在动态路由匹配中看到的那样，但是 Vue Router 可以提供更多的方式！TIP:为了简单起见，所有的路由都省略了
• 2.4 嵌套路由
• 一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如： /user/johnny/profile /user/johnny/posts +------------------+ +-----------------+ | User
• 2.5 编程式导航
• 除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。导航到不同的位置 注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL，可以使
• 2.6 命名路由
• 除了 path 之外，你还可以为任何路由提供 name。这有以下优点： 1.没有硬编码的 URL 2.params 的自动编码/解码。 3.防止你在 url 中出现打字错误。 4.绕过路径排序（如显示一个） const routes = [{path: '/user/:username',name: 'user',component:
• 2.7 命名视图
• 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。 <router-view class="vie
• 2.8 重定向和别名
• 重定向 重定向也是通过 routes 配置来完成，下面例子是从 /home 重定向到 /： const routes = [{ path: '/home', redirect: '/' }] 重定向的目标也可以是一个命名的路由： const routes = [{ path: '/home&#3
• 2.9 路由组件传参
• 将 props 传递给路由组件 在你的组件中使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为： 我们可以将下面的代码 const U
• 2.10 不同的历史记录模式
• 在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。Hash 模式 hash 模式是用 createWebHashHistory() 创建的： import { createRouter, createWebHashHistory } from 'vue-router'const router = c
• 第三章 高级应用
• 3.1 导航守卫
• 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。全局前置守卫 你可以使用 router.beforeEach 注册一个全局前置守卫： const router = createRouter({ ... })router.beforeEach((to, from) =&gt
• 3.2 路由元信息
• 时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段： const routes = [{path: '/posts',component: PostsLayout,c
• 3.3 数据获取
• 有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现： 1.导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。2.导航完成之前获取：导航完成前，在路由进入
• 3.4 Vue Router 和 组合式 API
• 引入 setup 和 Vue 的组合式 API，开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。在 setup 中访问路由和当前路由 因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。
• 3.5 过渡动效
• 想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API： <router-view v-slot="{ Component }"><transition name="fade&
• 3.6 滚动行为
• 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在支持 history.pushState 的浏览器中可用
• 3.7 路由懒加载
• 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入： // 将 // import UserDetails from
• 3.8 扩展 RouterLink
• RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。在大多数中型到大型应用程序中，值得创建一个（如果不是多个）自定义 RouterLink 组件，以在整个应用程序中重用它们。例如导航菜单中的链接，处理外部链接，添加 inactive-class 等。让我们扩展 Ro
• 3.9 导航故障
• 当使用 router-link 组件时，Vue Router 会自动调用 router.push 来触发一次导航。虽然大多数链接的预期行为是将用户导航到一个新页面，但也有少数情况下用户将留在同一页面上： 1.用户已经位于他们正在尝试导航到的页面 2.一个导航守卫通过调用 return false 中断了这次导航 3.当前的导航守卫还没有完成时，
• 3.10 动态路由
• 对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。添加路由 动态路由主要通过两个函数实现。router.addRoute
• 第四章 后记
• 4.1 API参考
• <router-link> Props to 类型：RouteLocationRaw 详细内容： 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个 string 或者是描述目标位置的对象。 <!-- 字符串 -->
• 4.2 全书完
• 谢谢阅读，全书完！