vue+element UI 跳转页面并传值

最新推荐文章于 2023-10-18 17:23:40 发布

原创最新推荐文章于 2023-10-18 17:23:40 发布 · 4.3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

本文介绍了在Vue.js结合Element UI中进行页面跳转时，如何使用query和params两种方式传递参数。query方式通过URL显示传值，刷新页面参数保持；params方式隐形传值，刷新后参数会丢失。此篇博客旨在记录和学习相关语法。

<!--在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上面不可见，值是可以传到另一个页面的，但是刷新页面会丢失，看业务需求来选择用哪个参数吧

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