vue中query和params的主要区别

vue中query和params的主要区别

1.query

1.1query传参地址使用path

     this.$router.push({
        path: "/type/id",
        query: {
           id: 1,
           type: "category",
        },
      });

1.2 路由表配置

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

1.3 请求地址 /type/id?id=1&type=category

1.4 接受参数 this.$route.query

2. params

2.1 params 传参地址 使用name

  this.$router.push({
        name: "CategoryDetail",
        params: {
          type: "category",
          id:1
        },
      });

2.2 路由表配置

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

2.3 请求地址 /category/1

2.4 接受参数 this.$route.params

2.5 query 传得参数都是显示在url 地址栏当中，而 params 传参不会显示在地址栏