vue页面之间传参(亲测)

3,403 阅读1分钟

vue页面之间传参有很多种方式,可以通过本地存储localStorage、vuex等等方式

本文主要是讲通过路由传参

页面传参很多人已经很熟悉了,但是对于新手来说可能有点分不清,网上一搜资料一大堆,好像说的还是很模糊,于是自己亲测了几种方式做了简单的总结:

路由传参分为两种

一种是通过router-link直接跳转,还有一种是 通过点击事件,调用this.$router.push()

第一种:直接跳转到path路径

<router-link to="detail"></router-link>

如果是带参数跳转

<router-link to="{path:'/apply-detail',query:{id:1}}">

B页面接收参数: this.$route.query

第二种:通过添加点击事件 调用this.$router.push()

<div onClick="jump()">跳转</div>
jump(id){
    this.$router.push()
}
1this.$router.push({name:'ApplyDetail',query:{detailId: id}})
参数显示在地址栏?detailId=123
2this.$router.push({name:'ApplyDetail',params:{detailId: id}})
地址栏看不见参数
3this.$router.push({path:'apply-detail',query:{detailId:id}})
参数显示在地址栏?id=1231
4this.$router.push({path:`apply-detail/${id}`})
参数显示在地址栏apply-detail/123
同时设置路由 path后面加:id
{
 path: '/apply-detail/:id',
 name: 'ApplyDetail',
 component: () => import('@/pages/apply-detail'),
 meta: { title: '申请详情' }
}

总结:直接调转 router-link 和 this.$router.push()都可以用,

如果跳转时需要做一些处理 比如接口请求,用this.$router.push()

1和3 是一样的(个人选择了1)

多个参数用1

想要地址简洁用4