# params方法有这样一种需求, 从A页面跳转到B页面时,要给B页面传参数, 参数分为两种, 一种是单个参数或者是少量的参数, 另一种是很多参数, 一般我们都会放到一个Objec中一起带过去,在我前任的代码中我发现, 她是这么写的, 无论是一个参数, 还是多个参数, 都一律像下面这样处理

//传过去的时候
 this.$router.push({
          path: '/B页面',
          query: { itemData: JSON.stringify(this.editObj) }
})
        
// 接收的时候
JSON.parse(this.$route.query.itemData)

这样写感觉也没啥问题, 但我觉得应该重新思考一下, 怎么写更加合理一点, 于是我在Vue Router的官网上找来了例子, 像下面这样写是不是更好一些呢路由组件传参 | Vue Router (vuejs.org)

如果只传一个参数, 比如最常见的是传个id过去的时候, 我们的思路是, B页面是一个组件, 是一个需要使用id参数的一个组件, 那么就把它理解成一个带id属性的组件, 只不过这个参数通过路由传过来而已, 像下面这样

//在路由里为B页面设置好
{
    path: "/demo/:id/",
    name: "demo",
    component: () => import("@/views/DemoView.vue"),
    props: true,
},
// 在组件中接收
export default {
  props: ["id", "name"],
  created() {
     console.log('id',this.id)
  },
}
// 在模板中使用 而不再写this.$route.query.itemData了
<template>
  <div>
    <div>{{ id }}</div>
  </div>
</template>

// A页面传参
this.$router.push({
        name: "demo",
        params: { id:110} },
});
// 或者也可以这样
this.$router.push("/path/110");
// 还可以在模板中这样写
 <router-link to="//110">demo</router-link>

多个参数, 那就直接传个对象吧

// A页面传参
this.$router.push({
        name: "demo",
        params: { user:{name:'jack',age:19} },
});
// B页面取值 
export default {
  props: ["user"],
  created() {
     console.log('user',this.user)
  },
}

定制参数, 比如有一个静态值需要和其他值合并一下, 再传给B页面, 这个真的是太便利了, 比如我有一个值要和上面user合并一起传到B页面


 {
    path: "/demo",
    name: "demo",
    component: () => import("@/views/DemoView.vue"),
    props: (route) => ({
      data: { ...route.params.user, url: "www.baidu.com" },
    }),
  },
  // B页面接收参数
  export default {
  props: ["data"],
  created() {
    console.log("data", this.data); // 多了一个url
  },
};
  // 在这里就可以转换自己想要的数据了

# query方法前面总结了params传参的方法, 现在把query的也补允进来, 相比于param, query有以下风点不同

query会把参数加在url后面, 而params不会

query时客户端刷新参数不会丢失, 而params会丢失

在使用this.$router.push方法时, query时用name / path 都可以, 而params只能用name

其他的使用和params一样

总结

再结合我前同事的代码, 当参数信息比较敏感时可以用JSON.stringfy与JSON.parse方法, 同时用子组件props来接收参数, 与this.$route.query / params解耦

$router是操作者'er' 所以可写入有push等方法 $route是信息提供者, 只读, 所以可以this.$route.query / params

Vue Router 路由组件传参应用

总结