Vue 路由传递参数

Vue 路由传递参数

一、params通过按钮方式

1.在列表中增加按钮

 <el-table-column label="分析单元" align="center" prop="leader" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUnit(scope.row)"
            v-hasPermi="['risk:object:edit']"
          >分析单元</el-button>
        </template>
      </el-table-column>

2.在js中加入方法

 /** 修改按钮操作 */
    handleUnit(row) {
      this.$router.push({
        path: `/risk/unit/${row.objectCode}`,
      })
    },

3.在路由中加入

{
    path: '/risk',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [
      {
        path: 'unit/:objectCode',
        component: () => import('@/views/risk/unit/index'),
        name: 'unit',
        meta: { title: '风险分析单元' }
      },
    ]
}

4.在子页面加入

 queryObjectParams:{
        objectCode: this.$route.params.objectCode,
      },

二、params通过router-link方式

1.在列表加

<el-table-column label="分析单元" align="center" prop="leader" >
        <template slot-scope="scope">
          <router-link :to="'/risk/unit/' + scope.row.objectCode" class="link-type">
            <span>分析单元</span>
          </router-link>
        </template>
      </el-table-column>

2.在子页面加

 queryObjectParams:{
        objectCode: this.$route.params.objectCode,
      },

3.在路由加

 {
    path: '/risk',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [
      {
        path: 'unit/:objectCode(\\d+)',
        component: () => import('@/views/risk/unit/index'),
        name: 'unit',
        meta: { title: '风险分析单元' }
      },
   ]
}

一、学员系统两种传参方式

路由：

 // ------------------ 考试部 start ------------------
  {
    path: '/exam',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [
      // ------------------ 考试部大库 start ------------------
      {
        path: 'examLibrary',
        component: () => import('@/views/exam/library/index'),
        name: 'examLibrary',
        meta: {title: '大库', activeMenu: '/exam/examLibrary'}
      },
      {
        path: 'examEnroll/:mechanism',
        component: () => import('@/views/exam/library/examEnroll/index'),
        name: 'examEnroll',
        meta: {title: '大库学员列表', activeMenu: '/exam/examLibrary'}
      },
      // ------------------ 考试部大库 end ------------------
    }，

1.query

父前端：

    </template>
  </el-table-column>

子页面：

  queryParams: {
    mechanism: this.$route.query.mechanism,
  }

2,params
父前端：

      <el-table-column label="培训机构" align="center" prop="mechanism">
        <template slot-scope="scope">
<!--          <router-link :to="{name:'examEnroll',query:{createStringTime:queryParams.createStringTime,mechanism:scope.row.mechanism}}" class="link-type">-->
<!--            <dict-tag :options="dict.type.sys_mechanism_type" :value="scope.row.mechanism">-->
<!--            </dict-tag>-->
<!--          </router-link>-->
          <router-link :to="'/exam/examEnroll/' + scope.row.mechanism"
                       class="link-type">
            <dict-tag :options="dict.type.sys_mechanism_type" :value="scope.row.mechanism">
            </dict-tag>
          </router-link>
        </template>
      </el-table-column>

子页面：

  queryParams: {
	 mechanism: this.$route.params.mechanism,
  }

3、返回上一级

  handleClose() {
        // const obj = { path: "/finance/mechanismEnroll?mechanism="+queryParams.mechanism };
        // this.$tab.closeOpenPage(obj);
        // 从index.vue,携带id=123跳到main.vue
        this.$router.push({name:'examLibrary'});//,query:{'mechanism':null, 'createStringTime': this.queryParams.createStringTime}
      },