前言

Vue路由传参一般可划分为两大类，分别是params传参和query传参，而在params传参中又可进一步划分为在url中显示参数和不显示参数两小类，这便是路由传参的三种方法。路由传参的使用场景则是在父组件路由跳转到子组件路由，携带参数进行跳转。

我们在组件切换时经常会有传递一些数据的需求，这样就涉及到了路由传参的问题。

在正式介绍三种路由传参方式之前，先补充介绍一下$route和$router，用于获取传递的params参数和query参数。

$route和$router的区别

1. $route是一个当前路由信息的对象，包括当前 URL 路径、查询参数、路径参数等信息。$route 对象是只读的，不可以直接修改其属性值，而需要通过路由跳转来更新。
2. $router是 Vue Router 的实例对象，包括了许多用于导航控制和路由操作的 API，例如 push、replace、go、forward 等方法。$router 可以用来动态地改变 URL，从而实现页面间的无刷新跳转。

因此，$route 和 $router 在功能上有所不同，$route 主要用于获取当前路由信息，$router 则是用于进行路由操作，例如跳转到指定的路由、前进、后退等。通常来说，$route 和 $router 是紧密关联的，并且常常一起使用。

使用 $route.query 和 $route.params 获取路由参数

第一种方式 : params传参（显示参数）

params显示传参又可分为声明式导航传参和编程式导航传参。

1. 声明式导航 router-link

这种方式通过router-link标签中的to属性进行路由跳转。to属性是一个字符串，里面写好子组件路由配置好的路径地址。携带对应参数进行跳转。具体实现如下：

//子组件路由配置
{
  path: '/son/:id',
  component: Son
}
//父组件路由
<router-link :to="/son/111">跳转到Son路由组件</router-link>
//获取参数
this.$route.params.id

2. 编程式导航 this.$router.push

使用编程式导航进行跳转时，仍需要配置好子组件路由参数后，代码如下：

//子路由配置 
{ 
  path: '/son/:id', 
  component: Son
} 
//父组件编程式导航(需要事件触发)
this.$router.push({ 
    path:'/son/${id}'
})
//获取参数
this.$route.params.id

第二种方式: params 传参 (不显示参数)

不显示参数也有声明式和编程式两种传参方式，与显示参数不同的是，这里需要通过name配置参数进行传值。params不显示参数传参会出现刷新丢失数据的问题。

1. 声明式导航 router-link

声明式导航传参和显示参数的params传参方式一致，通过router-link的to属性传递参数。

<router-link :to="{name:'Son',params:{id:111}}">跳转到Son路由组件</router-link>

2. 编程式导航 this.$router.push

使用这种方式传递参数仍需要提前在子组件路由中配置好参数，但是不能再通过子组件路由的path路径进行传值了，因为父组件已经通过params配置好了需要传递的参数。

//子组件路由配置
{
  path: '/son',
  name: 'Son',
  component: Son
}
//父组件编程式导航(需要事件触发)
this.$router.push({
    name:'Son',
    params:{
    	id:111
    }
})

//获取参数
this.$route.params.id

第三种方式 : query传参

query传参也可分为声明式和编程式两种方式。

1. 声明式导航 router-link

声明式导航同样是以router-link的to属性进行实现，需要提前配置好子组件路由的name属性，代码如下：

//子路由配置
{
  path: '/son',
  name: 'Son',
  component: Son
}
//父路由组件
<router-link :to="{name:'Son',query:{id:111}}">跳转到Son路由组件</router-link>

//获取参数
this.$route.query.id

2. 编程式导航 this.$router.push

编程式导航需要配置好子组件路由name属性，代码如下：

//子路由配置
{
  path: '/son',
  name: 'Son',
  component: Son
}
//父组件编程式导航(需要事件触发)
this.$router.push({
    name:'Son',
    query:{
    	id:111
    }
})

//获取参数
this.$route.query.id

以上就是路由传参的三种方式。

总结

1. params显示参数(动态路由)和query属性传值页面刷新参数不会丢失， params不显示参数，参数会丢失
2. 动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数
3. 获取参数通过$route对象，$route.query和$route.parmas