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