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的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
随机推荐
- Java Persistence with MyBatis 3(中文版) 第五章 与Spring集成
MyBatis-Spring是MyBatis框架的子模块,用来提供与当前流行的依赖注入框架Spring的无缝集成. Spring框架是一个基于依赖注入(Dependency Injection)和面向 ...
- 拖拽demo--兼容--全局捕获
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python 文件操作(二)
一. 文件的读写 1.找到文件 文件路径:./test.py 2.打开文件 open('文件路径','模式') 模式: r, 以只读的方式打开 w, 打开一个文件只用于写入,如文件已存在,直接重 ...
- 【转】C语言中DEFINE简介及多行宏定义
要写好C语言,漂亮的宏定义是非常重要的.宏定义可以帮助我们防止出错,提高代码的可移植性和可读性等. 在软件开发过程中,经常有一些常用或者通用的功能或者代码段,这些功能既可以写成函数,也可以封装成为宏定 ...
- QT学习之事件处理
Qt事件机制 Qt程序是事件驱动的, 程序的每个动作都是由幕后某个事件所触发.. Qt事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. Qt事件的类型很多, 常见的qt的事件如下: 键盘事 ...
- Yii2.0 多语言设置(高级版配置方法) - 新的方法
1.设置默认语言:在mail.php配置文件加上:'language'=>'zh_CN'; 2.多语言切换 (我这边是在site控制器里面操作的所以用的'/site/language') htm ...
- Java Decompiler(Java反编译工具)
参考:http://blog.csdn.net/yulei_qq/article/details/24175547 Java Decompiler可以对整个jar包进行反编译,也可以将其集成到ecli ...
- 34 输入3个数a,b,c,按大小顺序输出
题目:输入3个数a,b,c,按大小顺序输出 public class _034Sorting { public static void main(String[] args) { sorting(); ...
- ACM 超级楼梯 发工资
超级楼梯 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? Input 输入数据首先包含一个整数N,表示测试实例的个数,然后是N行数据,每行包含一个整数M( ...
- memcached整理の分布式集群算法
memcached如何实现分布式? memcached是一个“分布式内存对象缓存系统”,然而memcached并不像mongodb那样,允许配置多个节点,且节点之间“自动分配数据”,就是说memcac ...