【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,最大程度简化了传参和使用。如果需要传入额外的参数再使用对应方法即可。

猜你喜欢

转载自blog.csdn.net/weixin_43790653/article/details/125489676