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

前言

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

代码

第一个页面

		<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)">
              打卡记录
              
            el-button>
          template>
        el-table-column>
1
2
3
4
5
6
7
8

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

跳转路由js

  {
    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: ''}
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

另一个页面

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