vue-router携带多个参数 vue-router携带多个参数

需求背景
a页面通过请求获得的参数，通过vue-router传递给b页面，并在b页面使用
传递单个参数

a页面

//默认基本路由配置ok，后段请求处理完毕，仅展示关键部分 ··· getInfo () { //处理请求数据 ······ },goDetail (item) { //路由跳转，传递本页面 this.$route.push(`detailPage/${item.id}`) }
pageIndex.js (路由配置）

//路由配置信息 ... { //路由携带参数 path: 'detailPage/:id' ··· } ...
b页面

... // 此时跳转b页面后已经拿到a传的参数，该参数保存在 // this.$route.params中 // 在需要使用的地方,可以直接用 ... console.log(this.$route.params.id) ...

传递多个参数

a页面

//默认基本路由配置ok，后段请求处理完毕，仅展示关键部分 ··· getInfo () { //处理请求数据 ······ },goDetail (item) { //路由跳转，传递本页面,多个参数在后面拼就可以 this.$route.push(`detailPage/${item.id}/${item.name}/${item.size}`) }
pageIndex.js (路由配置）

//路由配置信息 ... { //路由携带多个参数，需要在后面加参配 path: 'detailPage/:id/:name/:size' ··· } ...
b页面

... // 此时跳转b页面后已经拿到a传的参数，该参数保存在 // this.$route.params中 // 在需要使用的地方,可以直接用 ... console.log(this.$route.params.id) console.log(this.$route.params.name) console.log(this.$route.params.size) ...

【vue-router携带多个参数】还有其他方法，
vuerouter除了params外还有query，也可以
比如你在调一次接口（nt操作），
使用vuex存储你的数据，
prop传值等。
这里仅记录这一个，因为刚用到！有遇到的这样的问题可以试一下。