Vue.js路由跳转带参数到模板组件。
从SalesOrderQuery组件跳到SalesOrder组件,并且通过params属性携带数据。
handleClick(row) {
//alert(row.FSaleName);//获取该行FSaleName列的值。
this.$router.push({path:'/salesorder',
name:'salesorder',//必须带name属性,要不然参数传递不成功。
params:{
FSaleNo:row.FSaleNo,FSaleName:row.FSaleName,FSaleQty:row.FSaleQty,FSaleStatus:row.FSaleStatus,
FSaleAmount:row.FSaleAmount
}
});
//console.log(row);
}
SalesOrder组件获取params中的数据:
export default{
name:"SalesOrder",
data() {
return {
FSaleNo: this.$route.params.FSaleNo,
FSaleName:this.$route.params.FSaleName,
FSaleQty:this.$route.params.FSaleQty,
FSaleAmount:this.$route.params.FSaleAmount,//接收路由传过来的数据
FSaleAmount:'',
FSaleType:'',
FSaleStatus:this.$route.params.FSaleStatus,
options:[{
value: '70000',
label: '小样单'
},
{
value: '70001',
label: '版本单'
},
{
value: '70002',
label: '大货单'
}]
}
}
}
Vue.js路由跳转带参数到模板组件。的更多相关文章
- Vue.之.路由跳转
Vue.之.路由跳转 在进行项目开发的过程中,需要使用路由进行跳转.如下: // 不带有参数,在页面上跳转到别的页面 1. this.$router.push('/login/init'); // ...
- js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
- vue设置路由跳转参数,以及接收参数
最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link :to ...
- vue二级路由跳转后外部引入js失效问题解决方案
vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
- vue,下级页面刷新导致路由跳转带过来的数据消失的解决方法
if(typeof(this.$route.query.result)=='string'){ //刷新时走这 }else{ //正常路由跳转过来后就把数据塞到 localStorage let ob ...
- Vue.js - 路由 vue-router 的使用详解2(参数传递)
一.使用冒号(:)的形式传递参数 1,路由列表的参数设置 (1)路由列表的 path 是可以带参数的,我们在路由配置文件(router/index.js)里以冒号的形式设置参数. (2)下面样例代码中 ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
随机推荐
- [SoapUI] Context is per test case, every test case has a different context
- 让你大开眼界的10款Android界面设计
根据调查显示, iOS与Android的市场份额差距正越来越大.Android设备正在成为手机应用市场的主力军.如何从设计层面创造一个优美的app界面来吸引用户已然成为广大App开发者们必做的功课之一 ...
- mosquitto ---配置SSL/TLS linux
mosquitto ---配置SSL/TLS 摘自: https://www.cnblogs.com/saryli/p/9821343.html 在服务器电脑上面创建myCA文件夹, 如在/home/ ...
- jdk1.7 环境变量配置
Windows系统中设置环境变量如下图右击“我的电脑”,选择“属性”. 点击“高级”选项卡,选择“环境变量”. 在“系统环境变量”中设置上面提到的3个环境变量,如果变量已经存在就选择“编辑”,否则选 ...
- 视觉SLAM漫淡(二):图优化理论与g2o的使用
视觉SLAM漫谈(二):图优化理论与g2o的使用 1 前言以及回顾 各位朋友,自从上一篇<视觉SLAM漫谈>写成以来已经有一段时间了.我收到几位热心读者的邮件.有的希望我介绍一下当前 ...
- 使用 console.time() 计算js代码执行时间
console.time('hellor'); for(var i=0;i<100000;i++){} console.timeEnd('hellor');
- C# 单例模式(Singleton)
摘要 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就是我们今天要 ...
- Linux 下的多线程下载工具 Axel
Axel 是 Linux 平台下的一款 HTTP/FTP 的高速下载工具,支持多线程以及断点续传,对于一些有速度限制的服务器上下载东西时,Axel 的速度就明显比 wget 要快一些 还有另一个基于 ...
- 【Linux】Linux各文件夹说明
转载 /bin/ — 用来贮存普通命令. /sbin/ — 许多系统命令(例如 shutdown)的贮存位置.属于基本的系统命令,如shutdown,reboot,用于启动系统,修复系统./sbin目 ...
- Android-xx倍图
图片文件夹对应倍图关系: ldpi 0.75 倍图 mdpi 1.0 倍图 hdpi 1.5 倍图 xhdpi 2.0 倍图 xxhdpi 3.0 倍图 xxxhdpi 4.0 ...