热门标签
热门文章
- 1Android面试题--HashMap原理分析_android hashmap原理
- 2pmon常用操作_pmon查看有哪些网卡
- 3谷歌公司推荐的计算机科学在线课程&学习路线_计算机国外课程学习路线
- 4技术中台的作用是什么，在什么情况下才有必要做技术中台？
- 5链表篇-链表翻转
- 6什么是红黑树？这篇讲解很全面！
- 7HTTP请求时connectionRequestTimeout 、connectionTimeout、socketTimeout三个超时时间的含义
- 8数据结构小记【Python/C++版】——链表篇
- 9驻极体式MIC电路设计_驻极体麦 差分电路
- 10java线程变量那点事儿_java 定义的变量线程也能用
当前位置: article > 正文
vue路由跳转this.$router.push带参数两种方法_this.$router.push;携带参数跳转
作者：我家小花儿 | 2024-03-22 03:52:37
赞
踩
this.$router.push;携带参数跳转
index.vue
html
<el-table class="table" :data="tableData" style="width: 100%">
<el-table-column label="" width="1000">
<template slot-scope="scope">
<!-- <div @click="get(scope.$index)"> -->
<div @click="get(scope.row.name)">
<img src="../assets/weng.png" alt="" />
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</div>
</template>
</el-table-column>
</el-table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
js部分
data数据
tableData: [
{
name: "王小虎",
},
{
name: "王小虎",
},
{
name: "王小虎",
},
],
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
第一种:明文路由跳转 相当于get,可以在地址栏看到参数
get(index) {
console.log(index);
const info = JSON.stringify({
id: 1,
flag: true,
});
// 明文路由跳转 相当于get
this.$router.push({
path: "/indexChildren",
query: {
info,
},
});
// 在另个一个接收组件created():this.$route.query.info
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
点击后如下图
第二种:暗文路由跳转 相当于post，地址栏参数隐藏
get(index) {
// 暗文路由跳转 相当于post
this.$router.push({
name: "IndexChildren",// 这里要加name的名称一般大写 和路由相对应
params: {
type: index,
},
});
// 在另个一个接收组件created():this.$route.params.index
},
// 还要配置路由加name
const routes = [{
path: '/index',
name: 'Index',
component: Home,
children: [{
path: 'indexChildren',
name:'IndexChildren', // 这里要加name的名称一般大写
component: () => import( /* webpackChunkName: "about" */ '../views/index.vue')
}, ]
}]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
点击后如下图
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/285117
推荐阅读
相关标签
