vue三种传参方法

例子：点击项目列表页，跳转到项目详情
列表页

方法一

点击列表页li元素跳转到详情页，并把项目id传给详情页，以便于详情页查询

<li v-for="(item,index) in demandList" @click="goDemandDetail(item.id)">

goDemandDetail(id){
    this.$router.push({path: '/demanddetails/'+id})
  },

路由:

{
  path:'/demanddetails/:id',
  name:'demanddetails',
  component: () => import('../views/demanddetails/demanddetails'),
  meta:{requireAuth:false}
},

项目详情页：

 var projectID = this.$route.params.id;//获取传的参数

方法二

通过路由属性中的name确定匹配的路由，通过params传递参数

  goDemandDetail(id){
    this.$router.push({
      name: 'demanddetails',
      params:{
         id:id            
      }
    })
}

路由：
这里的“:/id”可有可无，如果有，添加数据则会在url后显示，不添加则不显示

 {
    path:'/demanddetails/:id',
    name:'demanddetails',
    component: () => import('../views/demanddetails/demanddetails'),
    meta:{requireAuth:false}
},

项目详情页：

 var projectID = this.$route.params.id;//获取传的参数

方法三

通过path匹配路由，通过query传参，这种情况url地址中会有?id=

goDemandDetail(id){
      this.$router.push({
      name: 'demanddetails',
      query:{
         id:id            
      }
    })
 },

路由配置

{
  path:'/demanddetails',
  name:'demanddetails',
  component: () => import('../views/demanddetails/demanddetails'),
  meta:{requireAuth:false}
},

详情页获取id

this.$route.query.id