文章目录

一、方式一

二、方式二

三、方式三

总结

---

一、方式一

在画面A的table中，每条数据的右侧有一个操作按钮，点击查看按钮，跳转到画面B，并将参数传到画面B，将这条数据的详细内容显示在画面B上

 画面A的代码

查看按钮

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="150px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleView(scope.row)"
            v-hasPermi="['goodsManage:storageInMaster:query']"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleConfirm(scope.row)"
            v-hasPermi="['goodsManage:storageInMaster:edit']"
            :disabled="scope.row.approveType == 1 ? true :false"
          >审核
          </el-button>
        </template>
      </el-table-column>

 跳转及传参

    handleView(row) {
      this.$router.push({path: "/storagein/storagein-detail/detail/" + row.id});
    },

router中路由的定义，所有的跳转都需要路由的文件中进行定义

  {
    path: '/storagein/storagein-detail',
    component: Layout,
    hidden: true,
    permissions: ['goodsManage:storageInDetail:list'],
    children: [
      {
        path: 'detail/:id(\\d+)',
        component: () => import('@/views/goodsManage/storageInMaster/detail'),
        name: 'Detail',
        meta: {title: '国内低值货物入区明细', activeMenu: '/storageInMaster/detail'}
      }
    ]
  },

画面B的代码

created方法中通过this.$route.params方法获取了参数的参数，并根据参数将查询到的信息显示出来

  created() {
    this.queryParams.pid = this.$route.params && this.$route.params.id;
    this.getMasterInfo();
    this.getList();
  },

二、方式二

在画面A的table中，每条数据的右侧有一个操作按钮，点击查看按钮，跳转到画面B，并将参数传到画面B，将这条数据的详细内容显示在画面B上

 画面A的代码

查看按钮

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['goodsManage:gmCompanyGoodsStockChange:edit']"
            v-if="false"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleView(scope.row)"
            v-hasPermi="['goodsManage:gmCompanyGoodsStockChange:query']"
          >查看
          </el-button>
        </template>
      </el-table-column>

路由及传参

将参数写在query属性中。

      /**查看详细情报 */
      handleView(row) {
        this.$router.push({
          path: "/gmCompanyGoodsStockChange/gmCompanyGoodsStockChange-detail/detail",
          query: {id: row.id, putrecNo: row.putrecNo}
        })
      },

router中路由的定义，所有的跳转都需要路由的文件中进行定义

  {
    path: '/gmCompanyGoodsStockChange/gmCompanyGoodsStockChange-detail/',
    component: Layout,
    hidden: true,
    permissions: ['goodsManage:gmCompanyGoodsStockChange:list'],
    children: [
      {
        path: 'detail',
        component: () => import('@/views/goodsManage/gmCompanyGoodsStockChange/detail'),
        name: 'Detail',
        meta: {title: '库存调整详情', activeMenu: '/gmCompanyGoodsStockChange/detail'}
      }
    ]
  },

画面B的代码

created方法中通过this.$route.query方法获取了参数的参数，并根据参数将查询到的信息显示出来

  created() {
    console.log(this.$route.query);
    this.queryParams.putrecNo =  this.$route.query && this.$route.query.putrecNo;
    this.queryParams.id =  this.$route.query && this.$route.query.id;
    this.selectInfo();
    this.getList();
  },

三、方式三

在画面A的table中，某个项目可以设置一个路由跳转，点击这个项目，跳转到画面B，并将参数传到画面B，将这条数据的详细内容显示在画面B上

 画面A的代码

点击模板名称可以跳转到模板明细的画面

    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="模板名称" align="center" prop="templateName">
      <template slot-scope="scope">
        <router-link :to="'/template/template-detail/detail/' + scope.row.id" class="link-type">
            <span style="text-decoration: underline">{{scope.row.templateName}}</span>
        </router-link>
      </template>
      </el-table-column>
        <el-table-column label="仓库名称" align="center" prop="warehouseName"/>
        <el-table-column label="货类名称" align="center" prop="goodsName"/>
      <el-table-column label="是否基础模板" align="center" prop="isBasicsTemp" :formatter="formatTemp"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['settle:template:edit']"
          >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['settle:template:remove']"
          >删除
            </el-button>
            </template>
        </el-table-column>
    </el-table>

 router中路由的定义，所有的跳转都需要路由的文件中进行定义

  {
    path: '/template/template-detail',
    component: Layout,
    hidden: true,
    permissions: ['settle:bmsexpensetemplatedetail:list'],
    children: [
      {
        path: 'detail/:id(\\d+)',
        component: () => import('@/views/settle/template/detail'),
        name: 'Detail',
        meta: {title: '费率详情', activeMenu: '/template/detail'}
      }
    ]
  },

画面B的代码

created方法中通过this.$route.params方法获取了参数的参数，并根据参数将查询到的信息显示出来

  created() {
    //根据上一个画面传的id查询详细信息
    this.queryParams.templateId = this.$route.params && this.$route.params.id;
    this.getDetail();
    //根据id查询费率明细信息
    this.getList();
  },

总结

rooter-link传参及使用的几种方式

1.路径：http://localhost:8081/#/test?name=1

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)

使用：this.$route.query.id

2.路径：http://localhost:8081/#/test/1

<router-link :to="'/test/'+id">跳转</router-link>(id是参数)

使用：this.$route.params.id（这个id与路由的配置有关）

router.push中也有上面两种类似的写法