vue2.0 vue-cli项目中路由之间的参数传递
2024-08-23 10:56:02
1.首先配置路由,
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: require('../components/home.vue'), children: [ { path: 'user', name: 'user', component: require('../components/user/user.vue'), }, ] }, { path: '/login', name: 'login', component: require('../components/login/login.vue'), } ] })
2. 假设从login页面跳转到home页面,需要传递userName参数
那么login.ts中:
this.$router.push({ path:'/', query: { userName: this.loginForm.username } });
home.ts中接收参数:
this.userName = this.$route.query.userName
假设从home页面跳转到user子路由,需要传递UserRoleType 和 solutionID两个参数
home.ts中:
this.$router.push({ path:'user', query:{ userRoleType: this.userRoleType, solutionID: this.selectedSolutionID } });
user.ts中接收参数:
this.UserRoleType = Number(this.$route.query.userRoleType); this.solutionID = Number(this.$route.query.solutionID);
注意:1. 不管传不传参数,步骤一中路由配置是不变的。2. 这样传递的参数会反映到url中,即url中会携带这些参数
最新文章
- LINQ to SQL语句(20)之存储过程
- 查看当前web服务器的并发连接数
- 【WCF】Silverlight+wcf+自定义用户名密码验证
- Wince 对话框程序设计
- c标准库中字符和数字转换的函数
- oracle数据库TNS
- SIFT算法:KeyPoint找寻、定位与优化
- 队爷的讲学计划 CH Round #59 - OrzCC杯NOIP模拟赛day1
- HTTP学习笔记4-请求与响应结构例子
- Httphelper工具1
- Java基础——运算符
- JavaScript加载次序问题
- 视频转码成mp4格式,添加关键帧,添加元数据,把元数据放在第一帧,可拖动
- asp+SqlServer2008开发【第一集:安装SqlServer2008以及登陆】
- ubuntu下无法在目录下创建文件夹,权限不足解决办法
- 题解-ZeroJudge-c686 高斯符號
- Oracle awr报告生成操作步骤
- 启动HDFS时datanode无法启动的坑
- Accelerated Failure Time Models加速失效时间模型AFT
- Type mismatch in value from map: expected org.apache.hadoop.io.longWritable