一. 前言

• 当一个页面跳转到另一个页面时，组件结构相同，只是内容不同且地址栏后缀不同 ，这个地址栏的后缀就是参数，根据不同参数渲染不同的内容，这个跳转就叫路由传参。

• 当项目中组件间通过路由跳转,有时,我们需要传递一个组件中的参数到另一个组件中使用,那么我们此时就不能够靠组件间直接传递数据,只能通过路由导航传参

• 路由传参有两种方式:query传参和params传参

二.query传参

• 参数会显示到地址栏中,类似get请求,所以当刷新页面时,不会丢失数据

1.编程式

• 第一种参数直接进行拼接,简单粗暴

this.$router.push(`/list/?id=${this.id}&name=${this.name}`)

• 第二种需要子路由提前配置好参数
• 子路由配置参数 : 意为动态参数

{
 path: '/list/:id',
 component: List
}

• 路由拼接参数

this.$router.push({
  path:`/list/${this.id}`,
})

2. 声明式

• 该方式是通过router-link组件的to属性实现

<router-link :to="{name: 'list', query: {id: id,name: name}}">跳转到子路由</router-link>

• 以上两种方式均可list页面通过this.$route.query.id , this.$route.query.name接收

三. params传参

1.编程式

this.$router.push({
    name: 'list', //注意使用 params 时一定不能使用path    
    params: { username: this.username }, 
})

2.声明式

<router-link :to="{ name: 'list', params: { username: username } }">

• 取值：this.$route.params.username