vue点击详情按钮实现带参跳转

1. 源页面

<template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="gotoXiongshangdetail(scope.row.xlsxId)"
            v-hasPermi="['reportForm:xiongshangdetail:detail']"
          >详情</el-button>

gotoXiongshangdetail(xlsxId) {
      this.$router.push({ name: "Xiongshangdetail", params: {detailId: xlsxId } });
      console.log(xlsxId);
    },

2. router/index.js

  {
    path: '/index',
    component: Layout,
    hidden: true,
    permissions: ['reportForm:xiongshangdetail:detail'],
    children: [
      {
        path: 'xiongshangdetail/:detailId',
        component: () => import('@/views/reportForm/xiongshangdetail/'),
        name: 'Xiongshangdetail',
        meta: { title: '详细信息', activeMenu: '/xiongshangdetail' }
      }
    ]
  },

3. 目标页面

export default {
  name: "Xiongshangdetail",
  data() {
    return {
      detailId:null,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 详情表格数据
      xiongshangdetailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mileage: null,
        pierId: null,
        area: null,
        detailId: this.$route.params.detailId,
      },
    };
  },
  created() {
    console.log("Received xlsxId:", this.$route.params.xlsxId); // 添加日志
    this.detailId = this.$route.params.detailId;
    this.getList(this.detailId);
  },
  onLoad(option) {
    this.getDetailList(option.id)
  },
  methods: {
    /** 根据传过来的ID查询详情列表 */
    getList(detailId) {
      this.loading = true;
      console.log("detailId:",detailId);
      listXiongshangdetail(detailId).then(response => {
        this.xiongshangdetailList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log(response);
      }).catch(error =>{
        this.loading = false;
        console.error("Error fetching data:", error);
      })
    },