【Vue】路由的跳转、传参问题

一、方法

1. 路由的跳转有两种方式：

• 声明式导航：（router-link：务必要有to属性），只能实现跳转
• 编程式导航：$router.push | replace，可以在跳转之前处理自己的业务逻辑

2.路由传参，参数的两种写法：

• params参数： 属于路径当中的一部分，需要在声明路径的时候设置占位符(例如/home/:参数变量名)，访问方式为$route.params.参数变量名。
• query参数： 不属于路径的一部分，类似于ajax中的query参数，通过?key=value键值对的形式，访问方式为$route.query.key。

3.路由传参的两种形式：

• 字符串方式： 直接按照路由路径格式拼接对应字符串，然后赋值给to或者push()。
• 对象方式： {name:路由规则的名字,params:{键值对},query:{键值对}}，同时需要注意，对象方式中params参数必须搭配name属性使用，如果是path和parmas，路由可以跳转，但是不显示内容（因为匹配不到路由规则，除非path完全按照路由规则定义的格式写）。path和query搭配的时候，路由规则中不能写占位符，写了页面也是不显示内容（因为匹配不到路由规则）。

【扩展】关于params的路由规则是否要声明占位符的问题：

1. 字符串方式传参必须设置占位符，不然路由匹配不到，就不显示内容了。
2. 对象方式传参路由规则中占位符也可以不声明，不影响跳转，因为已经通过name匹配到路由规则了。
3. 其实就是定义路径的显示格式而已。不声明占位符，那么路径中也不会显示parmas参数。一般建议都写上占位符。
4. 但是不声明路由占位符的话，url路径中不显示，一刷新页面就获取不到params参数了，声明了之后刷新页面还能获取得到。（query参数刷新不会丢失）

二、涉及到的一些问题：

1. 路由规则中声明了路径占位符，但是并没有传入params参数会发生什么情况？(这里指声明了name的情况）

【答】 页面跳转正常显示内容（是因为已经可以通过name匹配路由规则），但控制台有警告。且路径有问题，路由规则的路径直接被省略了，只显示域名加query参数。例如：http://localhost:8080/#/?id=1，正确的应该是http://localhost:8080/#/home/userinfo/1?id=1。

2. 那如何指定params参数可传可不传呢？

【答】 只需要在声明路由规则的时候在路径占位符后面加一个?，例如/home/:id?，页面正常跳转，路径正常。

3. 传递的params参数是空串会怎么样？

【答】 页面正常显示但路径会出错。解决办法：params: { id: '' || undefined }，在parmas参数传递时加入或判断。

4. 路由组件传递props参数的方式：

• 布尔值写法： 只适用于parmas参数。在路由规则中开启props:true，然后在对应的路由组件中用props接收。可以将params参数作为路由组件身上的属性，访问更为方便（不需要再通过$route.params.参数变量名的方式）。
• 对象写法： props:{键值对}，可以传递一些额外的参数。
• 函数写法： 可以传递parmas参数、query参数。(很少用)
  props:($route)=>({id:$route.params.id, k:$route.query.id})。这种写法就是说可以让params参数和query参数都作为组件身上的属性，也是为了简化访问，但是很少用。

总结

个人觉得最推荐的路由传参方式还是动态路由（占位符）+ 字符串方式传参 + 开启props，最大程度简化了传参和使用。如果需要传入额外的参数再使用对应方法即可。