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的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
随机推荐
- Greeplum 系列(三) 基本用法
Greeplum 系列(三) 基本用法 <PostgreSQL 教程>:https://www.yiibai.com/postgresql 一.Greeplum 登陆与创建 1.1 登陆 ...
- ofo开锁共享平台
http://www.cnblogs.com/mengyu/p/7700980.html
- 白盒测试实践项目(day6)
胡俊辉负责JUint测试部分,了解JUint测试的方法,并对其他成员介绍JUint的使用,负责JUnit部分相关文档的编写,负责博客园博客的维护,负责小组成员的任务分类与管理. 李建文负责代码复审部分 ...
- 解决Emoji存储MySQL报错问题
在解决之前,得先说明一下为什么会出现报错,Emoji表情占用4个字节,但是MySQL数据库UTF-8编码最多只能存储3个字节,就会导致存储不进去 如何解决Emoji存储问题 mysql 的 utf8编 ...
- ASP.NET MVC WebApi接口授权验证
对于很任何多开发者来说,不管是使用任何一种框架,或者是使用任何一种语言,都要使用面向接口编程.使用面向接口编程的时候,那么就会有很多的权限验证,用户验证等等. 特别是对于一些系统来说,别人想要对接你的 ...
- 编写高质量代码改善C#程序的157个建议——建议89:在并行方法体中谨慎使用锁
建议89:在并行方法体中谨慎使用锁 除了建议88所提到的场合,要谨慎使用并行的情况还包括:某些本身就需要同步运行的场合,或者需要较长时间锁定共享资源的场合. 在对整型数据进行同步操作时,可以使用静态类 ...
- windows mobile 只能运行一个程序实例
static class Program { [System.Runtime.InteropServices.DllImport("coredll.Dll", SetLastErr ...
- 【小梅哥FPGA进阶教程】MC8051软核在FPGA上的使用
十.MC8051软核在FPGA上的使用 本教程内容力求以详细的步骤和讲解让读者以最快的方式学会 MC8051 IP core 的应用以及相关设计软件的使用,并激起读者对 SOPC 技术的兴趣.本实验重 ...
- XE5应用开发支持的安卓设备
XE5应用开发支持的安卓设备 A.官方文档声明 RADStudio 支持Android设备的应用开发,android版本从2.3到4.3.x,ARMv7处理器,MEON支持.根据Embarcadero ...
- [LeetCode 题解]: Interger to Roman
前言 [LeetCode 题解]系列传送门: http://www.cnblogs.com/double-win/category/573499.html 1.题目描述 Given an i ...