vue路由params来传递参数（vue 路由传参数和隐藏参数）

：暂无数据 2026-07-20 06:30:02 ：3

这篇文章给大家聊聊关于vue路由params来传递参数，以及vue 路由传参数和隐藏参数对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

本文目录

vue 路由传参数和隐藏参数
vue使用props在组件中传输和接收参数
Vue 路由传值的几种方法
vue-router 路由动态传参 query和params的区别

vue 路由传参数和隐藏参数

vue中路由中需要传递参数的话可以用query和param传递，两者类似于get和post。前者地址栏类似xx?p=1后者为xx/1，且后者可以隐藏地址栏显示。其实也可以用vue推荐的vuex进行响应式的参数管理。

两者传递参数需要router/index.js进行配置：

只需要去掉修改path即可，但是刷新会丢失数据，可以通过localstorage解决刷新问题。

1、在组件中使用props选项定义数据，接收参数；
2、在路由中，使用props选项来进行设置，路由中的props有三种模式：
a、布尔模式：props设置为true,可接收params方式的参数传递；
{
path:"bjc/:name/:price",//定义其属性
component:Bjc,
props:true
},
接收参数：
props: {
keyword: {
type: String,
default: ’’
}
},
在浏览器中的表现形式： www.qijinn.com/item/search/1/2
b、函数模式：props为函数，可接收query方式参数的传递；
路由定义： {
path: ’/items/search/result’,
name: ’search-result’,
meta: {
keepAlive: true
},
component: asyncLoader(’items/search-result’),
props: route =》 route.query
},
传递参数：
this.$router.push({
name: ’search-result’,
query: { keyword: word.trim() }
});
接收参数：
props: {
keyword: {
type: String,
default: ’’
}
},
在浏览器中的表现形式： www.qijinn.com/item/search/result?keyword= 七堇年

c、对象模式：props为对象。如果处理静态数据，可使用对象模式；
{
path:"yc",
component:Yc,
props:{
name:’蜜汁叉烧量版式’,
price:648
}
},

接收参数：
props: {
keyword: {
type: String,
default: ’’
}
},

Vue 路由传值的几种方法

方案一：

getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})

方案一，需要对应路由配置如下：

{ path: ’/describe/:id’,
name: ’Describe’,
component: Describe
}

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({ name: ’Describe’, params: { id: id
}
})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{ path: ’/describe’,
name: ’Describe’,
component: Describe
}

子组件中: 这样来获取参数

this.$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({ path: ’/describe’, query: { id: id
}
})

对应路由配置：

{ path: ’/describe’,
name: ’Describe’,
component: Describe
}

对应子组件: 这样来获取参数

this.$route.query.id
这里要特别注意在子组件中获取参数的时候是$route.params 而不是
$router 这很重要~~~

vue-router 路由动态传参 query和params的区别

/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/data?id=1 /data?id=2 这里的 id 叫 query

当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
这句话怎么理解呢？看下边：
如果你要使用params传参，那么你的路由页面index.js必须带上参数，如下

如果你要使用query传参，那么你的路由页面index.js必须带上参数，如下

这里看方法3,4,其实是对应方法1,2的，也就是说使用query方法，可以与path和name共用，2个都可以，但是params只能对应name。

要是想获取参数值：各自的获取方法是：
query和params分别是：this. route.params.id

顺便说一些参数是多个的情况
params传参，如果路由index.js如下：

那么跳转写法：this.$router.push({name:’detail’,params:{id:123,name:’lisi’}})
***隐藏网址***
query的写法参考上面。

query跟params，前者在浏览器地址栏中显示参数，后者则不显示。