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的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
随机推荐
- ORACLE 异机恢复
有时候需要将大的数据库发布到客户现场或转移机器时,不得不考虑在异机上恢复已经调整.测试好的库. dumpdp 全备的方法虽然易用,但在处理对象.索引.空间的时候异常的出错,比如:见有些公司,建表.索引 ...
- osgQt支持触摸屏
1. osgQt的构造函数添加:setAttribute(Qt::WA_AcceptTouchEvents);//wyh 2. event()修改,支持触摸时间 bool GLWidget::even ...
- charCodeAt方法以及Unicode中文汉字编码范围
js的charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数. 在字符串 "Hello world!" 中,我们将 ...
- 大佬福利之在你眼中 Web 3.0 是什么?(转)
web 3.0 Web 3.0一词包含多层含义,用来概括互联网发展过程中某一阶段可能出现的各种不同的方向和特征.Web 3.0 充满了争议和分歧,它到底应该什么样?具体的标志点又是什么? Web 2. ...
- Android编程设置LayoutParams
RelativeLayout.LayoutParams linearParams = (RelativeLayout.LayoutParams)viewHolder.headerWraper.getL ...
- .NET基础 (04)基础类型和语法
基础类型和语法1 .NET中所有内建类型的基类是什么2 System.Object中包含哪些方法,哪些是虚方法3 值类型和引用类型的区别4 简述装箱和拆箱原理5 C#中是否有全局变量6 struct和 ...
- 【Head First Java 读书笔记】(八)接口与抽象类
接口是什么?它是一种百分之百纯抽象的类. 什么是抽象类?即无法初始化的类. 例如,我们设计一个animal类,以此类为父类,分别设计了多种动物子类,例如Lion,Tiger,Cat,Wolf,Do ...
- VS中ashx文件关键字没有高亮标记的解决办法
VS --- 工具 --- 选项 --- 文本编辑器 --- 文件扩展名,只要在右侧添加 ashx ,选中MS-VS c# 保存后
- 微信小程序自定义事件
案例结构 首先,我还是会以案例的形式向大家讲解(这样也能方便大家更好的理解)简单介绍一下案例项目的内容(以上一章自定义组件的案例为基础)项目名称:component自定义子组件cpt父组件:logs ...
- .net EventHandler 事件处理
通常定义事件 都是通过自定义委托的方式来实现, 今天使用EventHandler 委托来定义事件: public class NewMailEventArgs : EventArgs { priv ...