前面的安装及基础以后再更新。。。

一、动态路由及懒加载

1.在路由路径中使用 “动态路径参数” 

⑴params

配置：动态路径参数id，以冒号开头

在<router-link>中 我们加入一个 params 属性来传入具体的参数值  

读取路由中的参数

⑵query

在path中，不需要配置参数

在<router-link>中 我们加入一个 query属性来传入具体的参数值 

path写法

读取路由中的参数

注意：如果提供了 path，params 会被忽略， query 不属于这种情况。

https://blog.csdn.net/mf_717714/article/details/81945218（params和query的区别）

2.动态添加路由（router.addRoutes）

router.addRoutes( routes )

动态添加更多的路由规则：参数必须是一个符合 routes 选项要求的数组。(如图)

符合 routes 选项要求的数组  

3.路由懒加载

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

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

路由懒加载语法

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo

二、重定向

 重定向也是通过 routes 配置来完成 

上面例子是从 ‘/a’  重定向到 ‘/b’  

重定向的目标也可以是一个命名的路由

也可以是一个方法，动态返回重定向目标

注意：导航守卫并没有应用在跳转路由 ‘/a’ 上，而仅仅应用在其目标上(重定向的新路由)。为 ‘/a’ 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

三、编程式导航 

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

四、路由的滚动行为

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

scrollBehavior 方法接收 to 和 from 路由对象。

第三个参数 savedPosition 当且仅当 popstate导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

五、精确匹配与模糊匹配

#linkActiveClass（模糊匹配）

类型: string

默认值: "router-link-active"

全局配置 <router-link> 的默认“激活 class 类名”。参考 router-link。

#linkExactActiveClass（精确匹配）

类型: string

默认值: "router-link-exact-active"

全局配置 <router-link> 精确激活的默认的 class。可同时翻阅 router-link。