前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-如何实现带参数跳转页面

vue-如何实现带参数跳转页面

作者头像
朱季谦
发布2019-09-18 15:32:22
2.5K0
发布2019-09-18 15:32:22
举报
文章被收录于专栏:编程技术沉思录

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

文/朱季谦

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

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

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

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

代码语言:javascript
复制
 <span @click="seeExa(scope.row)" class="mr15">查看试卷</span>

2.点击后会执行对应的seeExa(e)方法,把实现跳转的代码写到该方法里,代码如下:

代码语言:javascript
复制
 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":

代码语言:javascript
复制
 path: "/Exa/:id/:name",
 name: "Exa",
 component: Exa

完成以上的代码,就可以页面之间的带参数跳转了,这种方法会在url后面显示出属性值信息,存在一定的安全风险。

4.最后一步,就是在“查看试卷.vue"页面进行参数的接收,利用“this.$route.“工具便可以接收:

代码语言:javascript
复制
created: function() {
    this.myId = this.$route.params.id;
    this.myName=this.$route.params.name;
  }

根据以上方式,便可实现vue页面之间带参数的跳转了

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-05-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档