vue的传参方式

query方式

//传参代码
this.$router.push({
path:"/accept",
query:{
id:222}
});

路由配置

routes:[{
path:"/accept"
}]

接受参数页面

export default{
  data(){
    return{
      id:this.$router.query.id;
     }
  }
}

跳转界面时，传递的参数会显示在地址栏用？来分割

params模式

用name来匹配

this.$router.push({
name:"accept",
params:{
id:222
}
});

路由配置

routes:[{
name:'accpet',
path:'/accpet'
}]

接受参数页面

export default{
  data(){
    return{
      id:this.$router.params.id;
     }
  }
}

跳转转收页面的时候,地址栏显示目的地址,不带任何参数

location预声明传参（location.hash 路由带参）

this.$router.push({
path:'/accpet/2222'
})
//参数可以为一个也可以是多个用/隔开，也可以直接写成
<router-link to='/accpet/2222'><router-link>//动态路由传参

路由配置

routes:[{
path:'/accpet/:id'
}]

接收页面

export default{
  data(){
    return{
      id:this.$router.params.id;
     }
  }
}

路由跳转时,url会显示参数用/分隔