路由跳转携带id

页面1

<template v-slot="{ row }">
   <el-button type="text" size="mini" @click="$router.push(`/employee/detail/${row.id}`)" >查看     el-button>
template>

页面2

 userInfo: {
	     username: "",
	      mobile: "",
	      formOfEmployment: null,
	      workNumber: "",
	      departmentId: null,
	      timeOfEntry: "",
	      correctionTime: "",
	      staffPhoto: "",
	    },
//这里根据传递过来的id，来掉接口，如果没有id，不发请求
  created() {
    if (this.$route.params.id) {
      this.getEmployeeDetail();
    }
  },
  methods: {
    async getEmployeeDetail() {
      this.userInfo = await getEmployeeDetail(this.$route.params.id);
    },
 }

路由页面

import layout from "@/layout";
export default {
  path: "/employee",
  component: layout,
  children: [
    {
      path: "",
      name: "employee",
      component: () => import("@/views/employee"),
      meta: {
        title: "员工",
        icon: "people",
      },
    },
    {
    // 员工详情的地址 这里:id?是为了跳转时携带id，在有没有id的情况下都能符合要求去跳转
      path: "/employee/detail/:id?", 
      component: () => import("@/views/employee/detail.vue"),
      meta: {
        title: "员工详情", // 显示在导航的文本
      },
      hidden: true, // 表示隐藏在左侧菜单
    },
  ],
};