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)
...

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