vue3.x之路由传参(params和query)

为了便于后期维护,路由跳转以点击事件的形式绑定在methods中

params

父路由配置

toSonRouter() {
      this.$router.push({
        name: "xxx",//配置路由时加一个name的属性值来代替path
        params: {
          keyWord: this.$data.xxx,//将一个本地变量赋给keyWord传给子路由
        },
      });
    },

子路由接受数据

//以如下形式接收,注意是$route而不是$router!!!
this.$route.params.keyWord

query

父路由配置

toSonRouter() {
      this.$router.push({
        path: "/xxx",//路由的path
        query: {
          keyWord: this.$data.xxx,//将一个本地变量赋给keyWord传给子路由
        },
      });
    },

子路由接受数据

//以如下形式接收,注意是$route而不是$router!!!
this.$route.query.keyWord

注:
一个是name 一个是name 注意区分