Vue路由传参 query 和 params 方式详解

query方式：

直白的来说 query 相当于 get 请求，页面跳转的时候，可以在地址栏看到请求参数；

使用方式：使用 path 来匹配路由，然后 通过 query 来传递参数；（也可以用 name 匹配路由）

父组件：

    this.$router.push({
      path: "/home",
      query: {
        id: 2333
      }
    });

子组件获取参数：

this.$router.query.id

params方式：

类似 post，地址栏看不到参数

使用方式：只能用 name 来匹配路由，然后通过 params 来传递参数；

父组件：

    this.$router.push({
      name: "test",
      params: {
        id: 2333
      }
    });

子组件获取参数：

this.$router.params.id

注意：用 name + params 方式传递参数，刷新页面数据会消失；

解决方法：在 router.js 里，写路径时给路由添加参数

{
    path: "/test:id",
    name: "test",
    component: () => import("./views/test.vue")
}

这样的话，刷新页面数据就不会消失了，但是这样的话需要注意一点，就是你的路由会变成：

http://localhost:8080/#/test2333

(因为 id 传的是 2333)

并且，如果要给路由添加参数的话，大可不必使用 params 方式传参，直接这样就行了：

this.$router.push({
    path: `/test/${id}`    // es6 的模板字符串
})

ok 完结，撒花 🌼🌻🌺🌸