vue路由传参
params传参
vue传参方法一
//路由上配置要传递参数
<router-link :to="'/about/'+item.id">点击跳转页面</router-link>
1.路由定义配置
{
path: "/about/:id",
name: "about",
component: About
},
2.使用方法
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
// 这个id是一个变量,随便是什么值都可以
path: /about/${id}`,
})
3.获取数据(在about页面)
//需要传递的参数
$route.params.id
vue传参方法二
1.路由配置
{
path: "/about",
name: "about",
component: About
}
2使用方法
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'about',
params: {
id: id
}
})
- 获取方法(在about页面)
$route.params.id
query传参
vue传参方法三
//路由上配置要传递参数
<router-link :to="{name:'about',query:{id:item.id}}">点击跳转页面</router-link>
1.路由配置
{
path: "/about",
name: "about",
component: About
}
2使用方法
this.$router.push({
path: '/about',
//params换成了query
query: {
id: id
}
})
3 获取方法(在about页面)
$route.query.id
区别
(1)
query传参是在url地址后面用?进行分割 参数名和参数值之间用=,多个参数用&;跟前面用的params获取的区别在于,用query获取的id值会在url中有显示,可以看到你传过来的值
params传参的时候参数在页面刷新之后不会保存(除非你在路由配置的时候通过“:”参数名的形式在路由的path中进行指定)
(2)注意接收参数的时候,是route而不是router!
query更加类似于我们ajax中get传参,params则类似于post
query:
params: