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 传参不会显示在地址栏