【前后端分离项目之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"this.$route.“工具便可以接收:created: function() { this.myId = this.$route.params.id; this.myName=.$route.params.name; }根据以上方式,便可实现vue页面之间带参数的跳转了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。