使用query或params进行路由传参及两者区别

一、传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式。

1.params 传参（显示参数）又可分为 声明式 和 编程式 两种方式。

声明式router-link：该方式是通过router-link组件的to属性实现，子路由需要提前配置好参数。
<router-link :to="/child/1"> 跳转到子路由 </router-link>

路由的配置：

{
 path: '/child/:id',
 component: Child
}

编程式 this.$router.push：同样需要子路由提前配置好参数。
{
 path: '/child/:id',
 component: Child
}

this.$router.push({path:'/child/${id}'})

接收: this.$route.params.id

编程式接收的参数会是'${1}'这样的，用正则把它弄出来：

const templateString = this.$route.params.id;

    const regex = /\${(\d+)}/;

    const match = templateString.match(regex);

    console.log('match的值', match);

    if (match) {

      const paramValue = match[1];

      console.log(paramValue); // 输出: 1

    }

2. params传参（不显示参数）也可分为声明式和编程式两种方式，与显示参数不同的是，这里是通过路由的别名 name 进行传值的，不能用path，不然参数传不过去。

声明式：<router-link :to="{name:'Child',params:{id:1}}">跳转到子路由</router-link>

路由的配置：
{
 path: '/child,
 name: 'Child', // 路由别名
 component: Child
}

编程式：
this.$router.push({
  name:'Child',
  params:{id:1}
})

接收: this.$route.params.id

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

声明式router-link：该方式是通过 router-link 组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置好路由别名。
{
 path: '/child,
 name: 'Child', 
 component: Child
}

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

不使用路由别名：

{
 path: '/child,
 component: Child
}
把name改成path，'Child'改成'/child'：
<router-link :to="{path:'/child',query:{id:1}}">跳转到子路由</router-link>

编程式 this.$router.push：使用该方式传值的时候，同样需要子路由提前配置好路由别名（name 属性）
{
 path: '/child,
 name: 'Child',
 component: Child
}

this.$router.push({
  name:'Child',
  query:{id:1}
})

要是不用别名的话和上面声明式里提到的一样。

接收: this.$route.query.id

二、query和params传参的不同之处。

1.query传参的配置可以是path，也可以是name，只不过使用name的时候需要在路由配置相应的别名name；params传参的配置也可以是path或者name，使用name的时候同样需要设置别名，否则参数过不去。（是不是感觉上面乱起八糟的，我也觉得，平时用的话就记住query配合path使用，params配合name使用就好了，记不了那么多）

2.query在路由配置不需要设置参数，而params必须设置，设置后页面刷新就不会丢失参数。（这里的必须是指从版本vue-router@3开始，否则params的参数传不过去；vue-router@2版本的时候不设置params的参数第一次可以传，但页面刷新后参数会丢失，就是第4条中提到的params）

3.query传递的参数会显示在地址栏中，params的话要看用什么版本的vue-router，vue-router@3以前的不在路由配置中设置参数就不会显示，页面刷新还会丢失，设置了就不会。（又一次强调了vue-router版本条件下的第4条有关params的说明）

4.params传参刷新会无效，但是query会保存传递过来的值，刷新不变 。