关于javascript:vuerouter携带多个参数

需要背景

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传值等。
这里仅记录这一个，因为刚用到！有遇到的这样的问题能够试一下。