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.自定义的滚动条行为