vue router实践

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

1.动态路由匹配：

可以在  vue-router 的路由路径中使用“动态路径参数”(dynamic segment)，一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。

动态路径匹配

2.嵌套的路由/视图表

使用<router-view>，配置children属性

3.编程式导航

router.push(location, onComplete?, onAbort?)

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

编程式导航

注意：如果提供了 path，params 会被忽略。

router.replace(location, onComplete?, onAbort?)

router.replace 方法跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

4.命名路由

建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

配置路由名称

5.命名视图

router-view可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

6.重定向和别名

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

重定向

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

别名

7.带有自动激活的 CSS class 的链接

8.HTML5 历史模式或 hash 模式，在 IE9 中自动降级

9.自定义的滚动条行为