需求:在修改商品时,会进行页面跳转,通过点击修改按钮进行页面跳转。这时我们需要将商品的id携带过去
一、首先我们在查询页面实现路由跳转并携带参数。
1.1、修改按钮
<el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>
1.2、先在List展示表格的页面导入useRouter
import { useRouter } from "vue-router";
1.3、声明router
const router = useRouter();
1.4、点击事件进行传参并跳转路由,
其中name是跳转页面的名字(你在router里的index.ts中路由配置的name)
query是要传递的参数,比如回显需要根据id查询对应的内容
//修改的点击事件 路由跳转
const edit = (scope: any) => {
router.push({
name: "category-edit",
query: { id: scope.id, name: "category-edit" },
});
};
1.5、 配置路由,通过router.push()中的name就是查找路由配置,然后实现跳转
{
path: "/category/edit",
name: "category-edit",
component: () => import("@/views/category/Edit.vue"),
meta: { title: "分类编辑", icon: "Setting", isShow: false },
},
二、编辑页面接收查询页面的参数
2.1、在跳转过来的Edit页面导入useRoute
import { useRoute } from "vue-router";
2.2、声明route
const route = useRoute();
2.3、使用参数 (通过route打点调用属性就可以)
route.query.id