vue路由传参的基本实现方式小结【三种方式】

来传递参数了，因为父路由中，已经使用

params

来携带参数了，例如：

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

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id

注意：上述这种利用

params

不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失

方式三：

query

传参（显示参数）

query 传参（显示参数）也可分为 声明式 和 编程式 两种方式

1、声明式

router-link

该方式也是通过

router-link

组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置好路由别名（name 属性），例如：

//子路由配置
{
 path: '/child,
 name: 'Child',
 component: Child
}
//父路由组件
<router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>

2、编程式

this.$router.push

使用该方式传值的时候，同样需要子路由提前配置好路由别名（name 属性），例如：

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

在子路由中可以通过下面代码来获取传递的参数值

this.$route.query.id

希望本文所述对大家vue.js程序设计有所帮助。