从头到尾了解Vue-router（二）一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。

定义Vue-router的动态路由?

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件，例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染，那么，我们可以在vue-router的路由路径中使用“动态路径参数”(dynamicsegment)来达到这个效果

动态路径参数，使用“冒号”开头，一个路径参数，使用冒号标记，当匹配到一个路由时，参数会被设置到this.$router.params中，并且可以在每个组件中使用
现在我们知道了可以通过动态路由传参，在路由中设置了，多段路径参数后，对应的值分别都会设置到 $router.query和$ router.params中

query要用path来引入，params要用name来引入
接收参数时，分别是this. $route.query.name和this.$ route.params.name（注意：是 $route而不是$ router
query更加类似于我们ajax中get传参，params则类似于post，前者在浏览器的地址栏中显示，params不显示
params传值一刷新就没了，query传值刷新还存在

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数
$router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，经常用的跳转链接就可以用this.router.push会往history栈中添加一个新的记录。返回上一个history也是使用$ router.go方法

在浏览器中符号“#”，#以及#后面的字符称之为hash，

用window.location.hash读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面，可以使用hashchange事件来监听hash值的变化

history有缓存、有路由栈、可以层层跳转、刷新会出现白屏

history采用HTML5的新特性，且提供了两个新方法：

这两个API可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录

路由配置参数：
1、path:跳转路径
2、component:路径相对于的组件
3、name:命名路由
4、children:子路由的配置参数(路由嵌套)
5、props:路由解耦
6、redirect:重定向路由

1、路由跳转：this.$router.push()\

2、路由替换:this.$router.replace()\

3、后退：this.$router.back()\

4、前进：this.$router.forward()\