Vue中路由router传参三种方式详解

Vue中路由router传参有三种方式,分别是:

  1. params传参
  2. 路由属性配置传参
  3. query传参

其中,1和2是需要有对应的接收,否则会发现虽然传了,但是没办法接收。比如

必须要接收id才行。

以下是详解这三种方式的区别。

一、params传参

通过params传递参数,如果我们想获取 id 的参数值,可以通过this.$route.params.id这种方式来打印出来就可以得到了。

注意:获取参数的时候是 $route,跳转和传参的时候是 $router

二、路由属性配置传参

通过路由属性配置传参我们可以用this.$route.params.id来获取到 id 的值,

注意 this. $router.push 方法里面路径带的是值,路由配置项那里带的是变量名(属性名)来实现的对应;

以上两种传参方式基本上可以理解为 ajax 中的 post 请求方式,参数都是不可见的,但是上面两种方法都有一个弊端,就是当页面刷新了是获取不到参数值的,那么有没有一种方法是页面刷新之后参数依然存在呢?

三、query传参

第三种方式是用 query 来传参,这种方式是可以解决页面刷新参数消失问题的,这种方式可以理解为是 ajax 中的 get 方法,参数是直接在 url 后面添加的,参数是可见的,所以解决页面刷新参数消失问题建议使用此方法来解决;

区别

(1)params传参

只能用 name,不能用 path。

地址栏不显示参数名称 id,但是有参数的值。

(2)query传参

name 和 path 都能用。用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,而不是相对于父路由的相对路径,否则无法成功访问。

地址栏显示参数格式为?id=0&code=1

本文来自Senora ,本文观点不代表蓝洛水深立场,转载请联系原作者。

(0)
蓝洛水深的头像蓝洛水深管理员
上一篇 2023年5月19日 下午3:00
下一篇 2023年5月24日 上午9:08

相关推荐

发表回复

登录后才能评论
联系QQ
联系QQ
分享本页
返回顶部