vue页面操作技巧

时间:2022-12-28 19:17:21

// this.$router.push({ path: "https://www.baidu.com/"});
// POST请求的时候
// this.$router.push({ path: "/report/prePayDetails", query:{CClmNo:CClmNo,CPrepayPkId:CPrepayPkId,NPrepayTms:NPrepayTms}});
// GET请求的时候
// this.$router.push({ path: '/report/prePayDetails?${CClmNo}&CPrepayPkId=${CPrepayPkId}'});
// 打开新页面,手动拼接参数
// window.open(`/report/prePayDetails?CClmNo=${CClmNo}&CPrepayPkId=${CPrepayPkId}&NPrepayTms=${NPrepayTms}`);

例:页面跳转:

// this.$router.push({ path: "/report/prePayDetails", query:{CClmNo:CClmNo,CPrepayPkId:CPrepayPkId,NPrepayTms:NPrepayTms}});

第二个页面写:

props: {

//前一个页面传过来的参数
data: {
type:Object,//默认定位object
default:{}
}
},

//跳转到预付明细,路由跳转直接写
// this.$router.push({ path: "/report/prePayDetails", query:{CClmNo:CClmNo,CPrepayPkId:CPrepayPkId,NPrepayTms:NPrepayTms}});
//到另一个页面拿的话this.$route.query,拿到传过去的query对象。

// 打开新页面,手动拼接参数
// window.open(`/report/prePayDetails?CClmNo=${CClmNo}&CPrepayPkId=${CPrepayPkId}&NPrepayTms=${NPrepayTms}`);
// window.open('https://www.baidu.com?CClmNo=121');

//初始化加载
mounted() {
// this.search();
}

//把PrePayDetails页面引入进来
import PrePayDetails from "./prePayDetails";
export default {
name: "pre-pay-info",
components: {
//把PrePayDetails页面声明成一个组件
PrePayDetails
},

页面引用组件:

<!-- :data 给组件传递参数,一个对象 -->
<pre-pay-details :data="filter" v-if="detailsShow" />

vue页面操作技巧的更多相关文章

  1. PDF中的空白页面怎么删除,PDF页面删除技巧

    在Word中想要删除其中一页文档的怎么办?直接打开就可以删除了,那么我们如何删除PDF其中几页呢?下面小编就来告诉大家PDF删除页面跟空白页面的方法.想要删除PDF文档中的页面,可以使用PDF编辑器, ...

  2. python 全栈开发,Day92&lpar;编程式的导航&comma;vue页面布局&comma;marked包的使用&rpar;

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  3. PDF文件转换成Excel表格的操作技巧

    我们都知道2007以上版本的Office文档,是可以直接将文档转存为PDF格式文档的.那么反过来,PDF文档可以转换成其他格式的文档吗?这是大家都比较好奇的话题.如果可以以其他格式进行保存,就可以极大 ...

  4. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  5. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  6. vue页面顺序规范

    // html模板<template>    <div>因联vue页面规范</div></template><script>   // 模块 ...

  7. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  8. iOS 页面流畅技巧&lpar;1&rpar;

    一.屏幕显示图像原理 首先明确两个概念:水平同步信号.垂直同步信号. CRT 的电子枪按照上图中的方式,从上到下一行一行的扫描,扫描完成后显示器就呈现一帧画面,随后电子枪回到初始位置继续下一次的扫描. ...

  9. day99&colon;MoFang&colon;Flask-JSONRPC提供RPC接口&amp&semi;在APP进行窗口页面操作&lpar;窗口-帧-帧组&rpar;

    目录 1.服务端基于Flask-JSONRPC提供RPC接口 1.Flask-JSONRPC简介 2.安装Flask-JSONRPC模块 3.快速实现一个测试的RPC接口 4.移动端访问测试接口 2. ...

随机推荐

  1. EMC与电容(二)-电容参数意义、各电容的特点及应用

    上次的问题,看到很多回答里都有关于X电容,Y电容,NPO之类,这些很奇怪的参数到底代表什么意义呢?以前很多次都在BOM表里看到这些参数,一直都无视过去,正好这次的EMC课程里也提到这方面的知识,正好跟 ...

  2. YourSQLDba 配置&mdash&semi;&mdash&semi;修改备份路径

    公司一直使用YourSQLDba做本地备份,磁带机将本地备份文件上带做异地容灾备份.近期整理.验证备份时发现本地备份目录命名五花八门 其中有历史原因,也有无规划化的缘故,看着这些五花八门的目录,越看越 ...

  3. 转:HTML网页中插入视频各种方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  4. selenium启动IE浏览器报错:Unexpected error launching Internet Explorer&period; Browser zoom level was set to

    解决此问题的方法就是查看自己的浏览器是否没有放大至100%,如下 如果不是100%就会报错

  5. 【iHMI43真彩液晶模块】发布新版 DEMO 软件包,版本号为 0&period;14

    新版DEMO软件包主要在以下几个方面进行了改进: 1.改进触摸算法,使用链表注册模式:注册触摸按键后:用户只需要处理事件(event)就行了,其他都由系统完成: 2.改进systick 和 usart ...

  6. C&plus;&plus;Builder和VC的比较

    C++Builder和VC的比较 其实很久以前我就想写这篇文章,其原因一方面是因为笔者深深感觉到C++ Builder的确是一个先进与强大的程式开发工具,但更最重要的一点是,我深信C++ Builde ...

  7. nyoj&lowbar;3&colon;多边形重心问题(计算几何)

    基础的计算几何 多边形的n个顶点按*时针方向给出 由任意n边形可分解为n-2个三角形,各三角形面积面积与重心易得,故有各三角形的面积及重心 用重心公式可求得多边形的面积与重心 题目链接: http:/ ...

  8. 浅谈WPF中的MVVM框架--MVVMFoundation

    先科普一下:什么是WPF,请看下图 微软对于WPF技术的构想是很宏大的,可惜普及率不高,不过如果你要做Windows客户端开发的话WPF技术还是值得一学的. 什么是MVVM模式 简单来说它是一种高级的 ...

  9. 单点登录系统实现基于SpringBoot

    今天的干货有点湿,里面夹杂着我的泪水.可能也只有代码才能让我暂时的平静.通过本章内容你将学到单点登录系统和传统登录系统的区别,单点登录系统设计思路,Spring4 Java配置方式整合HttpClie ...

  10. 5&period;2 dubbo-compiler源码解析

    ExtensionLoader<Protocol> loader = ExtensionLoader.getExtensionLoader(Protocol.class); final P ...