编程式跳转+传参并接收

主要的功能就是跳转+传参

跳转主要是通过$router.push（编程式跳转）来实现，传参是在跳转的时候一起带过去

这边用的是使用params传参（类似post）

这是跳转前的代码（相关操作已体现）

<el-tabs @tab-click="searchOrder" v-model="orderTab" type="border-card" ><el-tab-pane label="xxxx1" name="1"><el-table @row-click="chooseOrderNum">表格一</el-table></el-tab-pane><el-tab-pane label="xxxx2" name="2"><el-table @row-click="chooseOrderNum">表格二</el-table></el-tab-pane>
</el-tabs>

跳转前的表格点击其中的某条数据（主要传的就是这两个东西）

//点击数据
<el-table @row-click="chooseOrderNum"></el-table>//跳转+传参
function clickRowData(row) {this.$router.push({name: 'GO',    //GO即为接收页面定义的nameparams:  {orderNum: row.orderNum,tab: this.tab       //tab标签页name定义的值}})
}

在created中直接调用search方法就可以搜索到相关单号的信息

//在对应的接收页面中的created（页面一加载的时候就获取传的值）
this.orderNumFromOther= this.$route.params.orderNum
this.tabFromOther = this.$route.params.tab  //可以用来切换tab标签页<div><el-input size="small" v-model=" orderNum " style="width: 250px;" ></el-input><el-button type="primary" size="small" style="margin-left: 10px" @click="search">查询</el-button><el-button type="info" size="small" @click="reset">重置</el-button>
</div><script>export default {name:'GO',  //此处为之前页面中写的GOdata(){}}
</script>

接收数据的页面的input关联的是orderNumFromOther
所以在页面一加载的时候input框中的内容就是另一个页面传过来的

tab也和之前的页面相互对应

这是tab=2时的效果图（和1时一样）

编程式跳转+传参并接收相关推荐

vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
微信小程序页面导航、传参、接收参数
页面导航指的是页面之间的相互跳转,在微信小程序中,页面导航分为如下两种: 1.声明式导航: 在页面上声明一个<navigator>导航组件通过点击<navigator>导航组 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
Android:页面跳转传参方式一，页面跳转传参方式二
一.页面跳转传参方式一跳转的过程如何传参:也就是页面之间如何传递参数,有点像函数调用如何传参,页面跳转也要传参. 复制一个工程你要跳转,(现在的代码如下),intent 既然能设置跳转到哪个页面 ...
vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
路由配置url跳转传参_如何配置路由器以进行网络范围的URL记录
路由配置url跳转传参 Don't be in the dark about who is visiting what web sites on your LAN. Use our two-prong ...
小程序开发页面跳转传参问题
小程序开发页面跳转传参问题 1.简单值 let id=1; wx.navigateTo({ url:'/pages/mypage/mypage?id='+id }) 取值另一个页面 onload:f ...
vue 跳转页面带对象_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
Vue路由传参和接收参数
Vue 路由传参和接收参数主要有四种解决方法如下:

编程式跳转+传参并接收

编程式跳转+传参并接收相关推荐

最新文章

热门文章