若依VUE 从一个页面跳转另一个页面并携带参数

One_Piece1112023-09-02 15:07

前言

由于火狐浏览器某些版本不支持 :to写法，测试后把同事的代码优化一下

代码

第一个页面

html 复制代码

		<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="toWinWorker(scope.row, queryParams.createTime)">
              打卡记录
              <!--<router-link :to="'/hcp/windowWorker/index/' + scope.row.winId + '/' + queryParams.createTime" class="link-type" 			size="mini" type="text" style="color: #1890ff">打卡记录</router-link>-->
            </el-button>
          </template>
        </el-table-column>

javascript 复制代码

	/*打卡记录*/
    toWinWorker(row, createTime) {
      const winId = row.winId;
      this.$router.push("/hcp/windowWorker/index/" + winId + "/" + createTime);
    },

跳转路由js

javascript 复制代码

  {
    path: '/hcp',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'windowWorker/index/:id/:date',
        component: (resolve) => require(['@/views/hcp/windowWorker/index'], resolve),
        name: 'WindowWorker',
        meta: {title: '工作人员打卡记录', icon: ''}
      }
    ]
  },

另一个页面

javascript 复制代码

	// 把携带的参数放到queryParams查询参数里
	created() {
		this.queryParams.winId = this.$route.params && this.$route.params.id;
	    this.queryParams.createTime = this.$route.params && this.$route.params.date;
	},