vue-router 中使用query和params传参的区别

使用场景：当我们在vue应用中进行路由跳转时，有时候跳转后的页面需要用到跳转前页面的数据，当然实现方法有很多种，vuex，localstorage，事件总线等。当数据量不大时，通常有时只需要传递一个id，这时使用这些方法多少有些繁琐，而使用路由传参的的方式就要简便许多。

路由传参分为params传参和query传参。

1.params传参

有声明式和编程式两种写法

声明式：

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

编程式：

 this.$router.push({
    name: 'home',//只能使用name,使用path会跳转失败
    params: { name: '张三' },
  })

home 页面可以使用 this.$route.params接收传过来的数据。

注意：使用params传参的数据在页面刷新后会消失，如果不想要刷新后数据消失，需要在路由文件中将路由配置为动态路由。如：

 {
    path: '/home/:name',
    name: 'home',
    component: Home
  }

这样的话:name就成home页面路由的一部分，如果不传参数的话会跳转失败。

2.query传参

同样有声明式和编程式两种写法

声明式：

<router-link :to="{ name: 'home', query: { name: name } }">

编程式：

 this.$router.push({
    name: 'home', //可以使用name或path
    query: { name: '张三' },
  })

home 页面可以使用 this.$route.query 接收传过来的数据。

总结:

1.params传参和query传参都支持编程式和声明式两种写法。

2.params只能配合name使用，query既可以配合name使用，也可以配合path使用。

3.params的参数不会显示在地址栏中，类似于网络请求的post请求；query的参数会显示在地址栏中，类似网络请求的的get请求。

4.params传递的参数在刷新页面后会消失，如果想要不消失的话需要配置成动态路由；query传递的参数不需要配置刷新页面后也依然存在。