vue路由传参的三种方法
程序员文章站
2022-05-18 17:19:10
...
参考文献:https://segmentfault.com/a/1190000012393587
一、直接在路由中写参数
<li v-for="article in articles" @click="getDescribe(article.id)">
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
//在router--->index.js进行配置
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
//通过this.$route.prams.id取值
二、通过prams传参
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
//在router--->index.js进行配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
//通过this.$route.prams.id取值
三、通过query传参
this.$router.push({
path: '/describe',
query: {
id: id
}
//在router--->index.js进行配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
//通过this.$route.query.id取值