vue页面之间传参（亲测）

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()
}
复制代码

1、this.$router.push({name:'ApplyDetail',query:{detailId: id}})
参数显示在地址栏?detailId=123
复制代码

2、this.$router.push({name:'ApplyDetail',params:{detailId: id}})
地址栏看不见参数
复制代码

3、this.$router.push({path:'apply-detail',query:{detailId:id}})
参数显示在地址栏?id=123  同1
复制代码

4、this.$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