前端路由跳转和传参的几种方式

Dear 丶 2024-03-31 08:59 108阅读 0赞

##  ##

文章目录

一、方式一

二、方式二

三、方式三

总结

--------------------

## 一、方式一 ##

在画面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中也有上面两种类似的写法