vue-路由跳转和路由传参！！！

需求：在修改商品时，会进行页面跳转，通过点击修改按钮进行页面跳转。这时我们需要将商品的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