【前后端分离项目之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. jQuery基础的HTML与text区别

    浏览器样式 <body> <h1>jQueryAPI特点<a href="#">a标<i>来个斜体</i>签</a ...

  2. 关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案

                              微信小程序开发环境苹果IOS真机预览报SSL协议错误问题 原文来自:https://blog.csdn.net/qq_27626333/articl ...

  3. src和href 如何做好seo 前端页面有那三层 AMD和CMD 规范的区别 渐进增强

    1==>简述一下src与href的区别 src用于替换当前元素: href用于在当前文档和引用资源之间确立联系 2==>.谈谈以前端角度出发做好SEO需要考虑什么? a. 了解搜索引擎如何 ...

  4. Java并发--Java中的CAS操作和实现原理

    版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/CringKong/article/deta ...

  5. HTML基础五-starrysky页面动起来

    Starrysky前端框架 链接:https://pan.baidu.com/s/1P8mPrHZjyRtzw1NWnAx-9w 提取码:cjl5 接口文档:https://www.showdoc.c ...

  6. CSS/H5保留显示 textarea输入的空格和换行

    .show { white-space: pre-wrap; }

  7. The 2019 China Collegiate Programming Contest Harbin Site

    题解: https://files.cnblogs.com/files/clrs97/HarbinEditorialV2.zip Code: A. Artful Paintings /* let x= ...

  8. [Taro] Taro 环境安装 (一)

    Taro  环境安装 Taro是一个前端小程序框架,通过这个框架写一套代码,再通过 Taro 的编译工具,就可以将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序.H5.React-N ...

  9. ZROI1153 【线上训练3】数个数

    ZROI1153 [线上训练3]数个数 传送门 一道非常有意思的题,涵盖了各种知识点. 首先,很显然,这是个容斥.容斥可以过掉\(30pts\). 这里我们考虑容斥+DP. 我们令\(dp[i][j] ...

  10. Javascript笔记:作用域和执行上下文

    一.作用域 Javascript的作用域规则是在编译阶段确定的,有声明时的位置决定. JS中有全局作用域,函数作用域,块级作用域(ES6引入). 1. 全局作用域 在整个程序生命周期内都是有效的,在任 ...