博客列表 >vue+element UI 跳转页面并传值

vue+element UI 跳转页面并传值

好想睡懒觉的博客
好想睡懒觉的博客原创
2020年11月27日 10:27:305893浏览

在html里面跳转:

<template>

//例子1

<el-table-column label="操作" align="center">
   <template slot-scope="scope">
       <el-button size="small" @click="$router.push({name:'bind_garden_list',query:{id:scope.row.id}})">查看已绑定小区</el-button>
       <el-button size="small" @click="tixian(scope.$index, scope.row)">提现</el-button>
   </template>
</el-table-column>

//例子2:

<el-table-column label="操作" align="center">
   <template slot-scope="scope">
       <el-button size="small" @click="$router.push({name:'wy_see_details',query:{admin_id:scope.row.admin_id,garden_id:scope.row.garden_id},params:{money_all:scope.row.money_all,garden_name:scope.row.garden_name}})">查看详情</el-button>
   </template>
</el-table-column>

</template

用事件跳转:

<el-table-column label="操作" align="center" width="250px">
   <template slot-scope="scope">
       <el-button size="small" @click="jumpBindGarden(scope.$index, scope.row)">查看城市收益</el-button>
       <el-button size="small" @click="handleUnBindCity(scope.$index, scope.row)">解绑城市</el-button>
   </template>
</el-table-column>


//js代码

methods:{

jumpBindGarden(index,row){
   this.$router.push({name:'city_garden',query:{admin_id:row.admin_id,city:row.city,id:row.id},params:{money_all:row.money_all,garden_name:row.name}})
},

}


关于传值说明:

1、有两种带参数的方法  query:{}  params:{}

query 是通过get传值url 上面可见 刷新页面参数不会丢失。

params 应该隐形传值,url上面不可见,值是可以传到另一个页面的,但是刷新页面会丢失,看业务需求来选择用哪个参数吧

这遍文章就是用来学习的,防止忘了语法,如果有哪里说得不对的希望大佬们海涵!


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议