精读 VueRouter 官方文档！

VueRouter 基础教程系列 🎉 VueRouter 知识结构体系图（大图预警） 路由排名工具 使用 Router Ranker 工具可以帮我们： 查看一个路径被转换后的正则表达式。 查看路径参数

VueRouter 基础教程系列 🎉 VueRouter 知识结构体系图（大图预警） router-link props to 目标路由地址，当被点击后，内部会调用 router.push() 进行导

VueRouter 基础教程系列 🎉 简介 通常，我们的路由配置 (routes) 是在路由器被创建之前就已经静态配置好的的。现在，我们可以使用动态路由技术在路由程序运行时阶段动态的添加或删除路由配置

VueRouter 基础教程系列 🎉 导航结果 路由导航的所有可能结果如下所示： 正确跳转到目标页面 可预知的故障 导航被中断 导航被取消 已经处于所要导航的目标页面 不可预知故障 导航守卫中抛出 E

VueRouter 基础教程系列 🎉 路由组件的懒加载 VueRouter 的 component 和 components 配置可以接受一个返回 promise 组件的函数，再结合构建工具 (web

VueRouter 基础教程系列 🎉 滚动行为 创建路由器时，可以使用 scrollBehavior 方法来控制路由切换时页面的滚动位置。 例如，滚动到顶部、保持原先的滚动位置、相对元素位置、锚点滚动

VueRouter 基础教程系列 🎉 简介 路由的过渡效果指的是为路由组件增加转场效果。 在 VueRouter 3.x 中可以直接使用 <transition> 组件包裹 <rotuer-view>

VueRouter 基础教程系列 🎉 相比于 OptionsAPI，CompositionAPI 给我们带来了更多的可能性。 以 CompositionAPI 方式来使用 VueRouter 需要注意

VueRouter 基础教程系列 🎉 在 Vue 中请求服务端数据的时机有两种： 路由导航完成之前：在路由的生命周期期间发起请求。 路由导航完成之后：在路由组件生命周期期间发起请求。 路由导航完成之前

VueRouter 基础教程系列 🎉 路由元信息 首先规范下术语，我们将路由配置对象（routes）中的每个配置项称之为 “路由记录”。 路由记录可以通过 children 进行嵌套，所以当一个路由被

VueRouter 基础教程系列 🎉 什么是导航守卫 ？ 导航是用来描述路由跳转链接的动作。而导航守卫则是用来控制路由是跳转还是取消。 导航守卫的作用范围有：“全局守卫”、“路由独享”、“组件级导航守

VueRouter 基础教程系列 🎉 路由组件传参 使用路由组件传参的目的在于解除组件与路由器的紧密耦合关系。 当组件中只能通过 this.$route 才能获取路由信息，这便会限制了组件的灵活性，因

VueRouter 基础教程系列 🎉 重定向 重定向功能 需要在路由 routes 配置项中进行定义。 重定向的目标可以是一个路径，也可是一个命名路由或者别名。 redirect 属性也可以是一个方法

VueRouter 基础教程系列 🎉 命名路由 使用 name 属性来为路由配置项设置别名。 “命名路由”的优点主要有以下几点： 更简短的路由导航地址、尽可能降低拼写错误的机率。 路径参数 自动编码/

VueRouter 基础教程系列 🎉 简介 Vue Router 使用自己的路径匹配语法，支持多种高级匹配模式，其灵感来源于 express。 “静态路由”只支持基于地址的全匹配；“动态路由”除了可以

VueRouter 基础教程系列 🎉 嵌套路由的 URL 路径片段往往对应着嵌套的组件结构。 实现嵌套路由的两个必要要素： 要嵌套的组件必须要包含一个 <router-view> 组件，作为被嵌套组件

VueRouter 基础教程系列 🎉 实例 JavaScript: HTML： 路由模式 hash 模式使用 createWebHashHistory() 方法创建。 HTML5 history 模式

VueRouter 基础教程系列 🎉 什么是路由？ 路由 (routing) 是一个动词，主要用于工程技术领域，其定义是： 路由在软件领域的应用最早源于服务端，客户端浏览器通过发送 HTTP 请求到服