（十二）Vue router：路由的相关知识点

1.   动态路由匹配

1. 应用场景：通过动态路由参数的模式进行路由匹配

实例：id为动态参数

表明<router-link to=”/user/[1,2,3,4]”//参数可变>

 

通过$route.params.变量名访问该路由链接中对应的参数

1. 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。$router和$route的区别：前者是vue router的实例对象，后者存放路由的一些消息，如参数。

1.传递动态参数

 

Props:true表示开启了路由传参，但是只能访问（使用）动态参数

2.传递对象形式的静态参数（对象）

 

都能匹配到（可以成功跳转到相应组件），但是只能访问（使用）对象形式的参数，而动态参数不能（访问）使用。

3.传递1和2 两种类型的参数

 

都能访问（使用），补充：箭头函数由于返回的是一个对象所以要用（）把对象包裹起来。

疑问：为什么在3的函数中是route，而1中是$route？$route和route两者有什么区别？

传递动态参数的基础使用：path:/..../:动态参数，使用：$route.params.参数名。

动态匹配传参使用总结分为三步：在路由规则里设置props值的类型（true，对象，函数）------>组件中props属性接收,值为一个数组[参数名]------>模板中使用{{参数名}}

四．命名路由

正在上传…重新上传取消

        解释:to=”{name对应的路由规则，params:{要传递的参数}}”.

使用步骤：在路由规则里加入name属性------><router-link>中绑定to属性，值为一个对象，对象中有两部分内容，一部分是自己的命名(想要跳转到name对应的路由规则)，另一部分是要传递的参数params;{}------>

五．   编程式导航

1.声明式导航

        通过点击链接实现导航的方式，叫做声明式导航例如：普通网页中的                   <a></a> 链接 或 vue 中的 <router-link></router-link>

2.常用的编程式导航 API 如下：

        this.$router.push('/。。。') 

        this.$router.go(n)

3.编程式导航参数规则

        1.router.push() 方法的参数规则

正在上传…重新上传取消

        query这种方式参数会拼接在url上面。

        关于this.$router.push,replace,go三种方法的区别:

1.this.$router.push()

        描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

2.this.$router.replace()

        描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

3.this.$router.go(n)

        相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

六．vue-router的历史模式和hash模式区别

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观 。

   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

   3. 兼容性较好。

4. history模式：

   1. 地址干净，美观 。

   2. 兼容性和hash模式相比略差。

   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。