Vue-router 3.x

1. router.push路由导航失败 当使用 router-link 组件时，Vue Router 会自动调用 router.push 来触发一次导航。 虽然大多数链接的预期行为是将用户导航到一个

1. 当路由被访问的时候才加载对应组件 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 可以自定义路由切换时页面如何滚动。 当创建一个 Router 实例，可以提供一

有时，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，需要从服务器获取用户的数据。我们可以通过两种方式来实现： 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在

1.Transition过渡组件 <router-view> 是基本的动态组件，所以可以用 <transition> 组件给它添加一些过渡效果： 2. 在组件内设置单个路由的过渡<transition

1. 路由配置routers中配置 meta 字段 定义路由的时候可以配置 meta 字段： 2. 访问meta 字段 首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌

如果不想要很丑的 hash(`#`)，我们可以用路由的 **history 模式**，这种模式充分利用 `history.pushState` API 来完成 URL 跳转而无须重新加载页面。

1. 使用 props 将组件和路由解耦： 取代与 $route 的耦合 通过 props 解耦 这样就可以在任何地方使用该组件，使得该组件更易于重用和测试 2. props设置为布尔值 如果 pro

1. 重定向redirect 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： 重定向的目标也可以是一个命名的路由： 重定向的目标也可以是一个方法，动态返回重定向目标：

1. <router-view name="a"></router-view> 有时候想同时 (同级) 展示多个视图，而不是嵌套展示 例如创建一个布局，有 sidebar (侧导航) 和 main (

1. 在 routes 配置中给某个路由设置名称 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 rout

1. 进行路由跳转的两种方式 使用 <router-link> 创建 a 标签 还可以借助 VueRouter 实例this.$router的方法，通过编写代码来实现。 2. router.push(

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如： 借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。 创

1. 动态路由匹配/user/:username/post/:post_id 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。 例如，有一个 User 组件，对于所有 ID 各不相同的用户

用 Vue.js + Vue Router 创建单页应用SPA：使用 Vue.js ，我们可以通过组合组件来组成应用程序，如果要把 Vue Router 添加进来，我们需要做的是，将组件 (compo

对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。 Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易