Vue——路由传参

1、通过添加查询字符串实现跳转

//主页面
//设置点击事件跳转到子页面
methods: {
  newSelect(item){
    // console.log(item)
    this.$router.push({
      path:'/home/detail',
      query:item
    })
  }
},


//子页面

created() {
  // console.log(this.$route)
  this.detailData=this.$route.query
},
data(){
  return {
    detailData:{}
  }
}

2、通过配置路由名称实现跳转

注意：传参添加一个变量也可以实现传参，但是刷新子路由页面的时候，数据如果添加在path后面的话，数据会保留，如果没有添加到path后面的数据会丢失，避免数据丢失，应该在path后面添加上所有变量数据，换一种说法，就是，刷新的时候，是从地址栏获取变量数据，但是因为没有在path后面添加数据变量，从主页面过来的路由没有把数据添加到地址栏，而是直接渲染到了页面，导致刷新的时候，没有添加到path后面的数据变量丢失

//在路由配置文件中添加路由名称以及传递的变量

{
    path:'detail/:id',      //实际上的数据还包含username，age等等，但是刷新之后username等数据会丢失，必须从主页面访问子页面，才能获取到username等数据，数据id会一直存在
    name:'detail',
    component:Detail
}

//主页面
methods: {
  newSelect(item){
    // console.log(item)
    this.$router.push({
      name:'detail',
      params:item
    })
  }
},

//子页面
created() {
  console.log(this.$route)
  this.detailData=this.$route.params
},
data(){
  return {
    detailData:{}
  }
}

3、仅传递参数id，在子页面通过id向服务器请求数据