vue-如何实现带参数跳转页面
【前后端分离项目之vue框架经验总结】
文/朱季谦
在vue框架的前端页面上,若要实现页面之间的带参数跳转,可参考以下实现过程:
例如,点击截图中的“查看试卷”,可实现带参跳转到相应的试卷页面,该功能类似查看试卷的详情页面:
假如以上所在页面为“试卷管理.vue”,需跳转到页面为“查看试卷.vue”。
1.在试卷管理.vue页面里,点击“查看试卷”按钮的相应代码如下:
<span @click="seeExa(scope.row)" class="mr15">查看试卷</span>
seeExa(e) {
window.console.log("查询成功", e);
this.$router.push("/Exa/" + e.id+"/"+e.paperName);
}
注释:"/Exa/"为“查看试卷.vue”页面对应的路由名字,斜杆后面的e.id+"/"+e.paperName为跳转带的参数。
3.在该页面对应的路由需配置相应属性信息,即path: "/Exa/:id/:name":
path: "/Exa/:id/:name",
name: "Exa",
component: Exa
完成以上的代码,就可以页面之间的带参数跳转了,这种方法会在url后面显示出属性值信息,存在一定的安全风险。
4.最后一步,就是在“查看试卷.vue"页面进行参数的接收,利用“this.$route.“工具便可以接收:
created: function() {
this.myId = this.$route.params.id;
this.myName=this.$route.params.name;
}
根据以上方式,便可实现vue页面之间带参数的跳转了
vue-如何实现带参数跳转页面的更多相关文章
- 10.vue router 带参数跳转
vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...
- 使用openURL实现程序间带参数跳转详解
使用openURL实现程序间带参数跳转详解 实现的效果:有两款应用A与B,A打开B A --> B 1. 新建工程B,bundle ID为com.YouXianMing.B 建立一个URL 这么 ...
- 微信小程序之点击列表的item带参数跳转界面
1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...
- 微信小程序携带参数跳转页面/获取页面栈
页面跳转携带参数(以传递两个参数为例) a.wxml 页面传递 1 <navigator url="/pages/b/b?id=1&sid='289'"> &l ...
- Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面
1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...
- Vue移动端焦点状态跳转页面,焦点和键盘不消失的问题
问题:input搜索,在移动端焦点状态跳转页面,焦点不失焦,还在跳转后的页面闪烁,且键盘不消失 //主动隐藏键盘 document.getElementById('inputSearch').blur ...
- 微信小程序页面跳转,带参数跳转
1. wx.navigateTo (保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.) 路径:只能跳转非tabbar路径 参数: 'path?key=v ...
- 从A页面带参数跳转到B页面;进行解析,并显示数据,进行编辑
A页面跳转时候的地址: parent.layer.open({ type: 2, title:'新建草稿', shadeClose: true, shade: 0.8, scrollbar: fals ...
- 微信小程序页面带参数跳转
页面传递参数的方式 data-para js获取参数
随机推荐
- IOS plist文件
转自:http://www.cnblogs.com/geraldzhang/archive/2011/08/24/2152121.html 在Mac OS X 的Cocoa ,NeXTSTEP 和GN ...
- Java面向对象之泛型
主要介绍: 认识泛型 构造方法中使用泛型 设置多个泛型 通配符 泛型接口 泛型方法 泛型数组 一.认识泛型 具体实例如下: package com.huolongluo.newfeatures; /* ...
- web文件上传的总结(一)
在HTML文件中用表单标签,需要注意input中type为file的name属性值myfile,PHP获取上传文件信息使用name属性值来区分的 1:表单 method="post &quo ...
- 【分布式搜索引擎】Elasticsearch之如何安装Elasticsearch
在Macos上安装 一.下载安装过程 最新版本下载地址: https://www.elastic.co/cn/downloads/elasticsearch 历史版本下载地址: https://www ...
- 其他综合-CentOS7 安装 Jumpserver 跳板机
CentOS7 安装 Jumpserver 跳板机 1.实验描述 搭建 jumpserver 平台,实现有效的运维安全审计.完美做到事先防范,事中控制和事后溯源 2.实验环境 物理机系统:Window ...
- luoguP1198 [JSOI2008]最大数
https://www.luogu.org/problem/P1198 update!!! 经过老师的讲解,惊人的发现这题有用更简单数据结构维护的解法,而越简单的数据结构(如果能够用的话),越好(实现 ...
- 201871010132--张潇潇--《面向对象程序设计(java)》第十六周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个作业的要求在哪里 https://www.cnblogs.c ...
- linux下安装编译为安装的php扩展
1.进入php源码包中,找到需要安装的扩展模块目录.cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序,(作用是检测 php 的内核版本,并为扩 ...
- git 清空所有commit记录
说明:例如将代码提交到git仓库,将一些敏感信息提交,所以需要删除提交记录以彻底清除提交信息,以得到一个干净的仓库且代码不变 1.Checkout git checkout --orphan late ...
- golang和python互相调用
http://blog.yuanzhaoyi.cn/2018/06/27/golang_python.html python3-ctypes: https://docs.python.org/3.5/ ...