一.params传参(显示参数)

1.声明式传参 :router-link

//子路由配置
{
path:'wy/:id',
compoent:wy}

//父组件配置
<router-link:to='/wy/123>进入wy路由</router-link>

2.编程式:this.$router.push

{path:'./wy/:id'

component:Wy,

//父组件配置
this$router.push({
path:'/wy/${id}'
})

子路由通过{this.$router.params.id} 获得参数

二.params传参(不显示参数)

1.声明式router-link

<router-link :to="{name:'Wy',params:{id:123}}">进入wy路由</router-link>

2.编程式:this.$router.push

//子路由配置
{
  path: '/wy,
  name: 'Wy',
  component: Wy
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Wy',
    params:{
     id:123
    }
})

子路由通过{this.$router.params.id} 获得参数

query传参

1.声明式router-link

//子路由配置

{
  path: '/wy,
  name: 'Wy',
  component: Wy
}
//父路由组件
<router-link :to="{name:'Wy',query:{id:123}}">进入Wy路由</router-link>

2.编程是式航

//子路由配置
{
  path: '/wy,
  name: 'Wy',
  component: Wy
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Wy',
    query:{
     id:123
    }
})

子路由通过{this.$router.query.id} 获得参数