【前后端分离项目之vue框架经验总结】

文/朱季谦

在vue框架的前端页面上,若要实现页面之间的带参数跳转,可参考以下实现过程:

例如,点击截图中的“查看试卷”,可实现带参跳转到相应的试卷页面,该功能类似查看试卷的详情页面:

假如以上所在页面为“试卷管理.vue”,需跳转到页面为“查看试卷.vue”。

1.在试卷管理.vue页面里,点击“查看试卷”按钮的相应代码如下:

 <span @click="seeExa(scope.row)" class="mr15">查看试卷</span>
 
2.点击后会执行对应的seeExa(e)方法,把实现跳转的代码写到该方法里,代码如下:
 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-如何实现带参数跳转页面的更多相关文章

  1. 10.vue router 带参数跳转

    vue router 带参数跳转 发送:this.$router.push({path:'/news',query:{id:row.id}}) 接收:var id=this.$route.query. ...

  2. 使用openURL实现程序间带参数跳转详解

    使用openURL实现程序间带参数跳转详解 实现的效果:有两款应用A与B,A打开B A --> B 1. 新建工程B,bundle ID为com.YouXianMing.B 建立一个URL 这么 ...

  3. 微信小程序之点击列表的item带参数跳转界面

    1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...

  4. 微信小程序携带参数跳转页面/获取页面栈

    页面跳转携带参数(以传递两个参数为例) a.wxml 页面传递 1 <navigator url="/pages/b/b?id=1&sid='289'"> &l ...

  5. Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面

    1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...

  6. Vue移动端焦点状态跳转页面,焦点和键盘不消失的问题

    问题:input搜索,在移动端焦点状态跳转页面,焦点不失焦,还在跳转后的页面闪烁,且键盘不消失 //主动隐藏键盘 document.getElementById('inputSearch').blur ...

  7. 微信小程序页面跳转,带参数跳转

    1.  wx.navigateTo  (保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.) 路径:只能跳转非tabbar路径 参数:  'path?key=v ...

  8. 从A页面带参数跳转到B页面;进行解析,并显示数据,进行编辑

    A页面跳转时候的地址: parent.layer.open({ type: 2, title:'新建草稿', shadeClose: true, shade: 0.8, scrollbar: fals ...

  9. 微信小程序页面带参数跳转

    页面传递参数的方式 data-para js获取参数

随机推荐

  1. IOS plist文件

    转自:http://www.cnblogs.com/geraldzhang/archive/2011/08/24/2152121.html 在Mac OS X 的Cocoa ,NeXTSTEP 和GN ...

  2. Java面向对象之泛型

    主要介绍: 认识泛型 构造方法中使用泛型 设置多个泛型 通配符 泛型接口 泛型方法 泛型数组 一.认识泛型 具体实例如下: package com.huolongluo.newfeatures; /* ...

  3. web文件上传的总结(一)

    在HTML文件中用表单标签,需要注意input中type为file的name属性值myfile,PHP获取上传文件信息使用name属性值来区分的 1:表单 method="post &quo ...

  4. 【分布式搜索引擎】Elasticsearch之如何安装Elasticsearch

    在Macos上安装 一.下载安装过程 最新版本下载地址: https://www.elastic.co/cn/downloads/elasticsearch 历史版本下载地址: https://www ...

  5. 其他综合-CentOS7 安装 Jumpserver 跳板机

    CentOS7 安装 Jumpserver 跳板机 1.实验描述 搭建 jumpserver 平台,实现有效的运维安全审计.完美做到事先防范,事中控制和事后溯源 2.实验环境 物理机系统:Window ...

  6. luoguP1198 [JSOI2008]最大数

    https://www.luogu.org/problem/P1198 update!!! 经过老师的讲解,惊人的发现这题有用更简单数据结构维护的解法,而越简单的数据结构(如果能够用的话),越好(实现 ...

  7. 201871010132--张潇潇--《面向对象程序设计(java)》第十六周学习总结

      博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个作业的要求在哪里 https://www.cnblogs.c ...

  8. linux下安装编译为安装的php扩展

    1.进入php源码包中,找到需要安装的扩展模块目录.cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序,(作用是检测 php 的内核版本,并为扩 ...

  9. git 清空所有commit记录

    说明:例如将代码提交到git仓库,将一些敏感信息提交,所以需要删除提交记录以彻底清除提交信息,以得到一个干净的仓库且代码不变 1.Checkout git checkout --orphan late ...

  10. golang和python互相调用

    http://blog.yuanzhaoyi.cn/2018/06/27/golang_python.html python3-ctypes: https://docs.python.org/3.5/ ...