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

【前后端分离项目之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"代码，就可以页面之间的带参数跳转了，这种方法会在url后面显示出属性值信息，存在一定的安全风险。

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

created: function() {
    this.myId = this.$route.params.id;
    this.myName=.$route.params.name;
  }

根据以上方式，便可实现vue页面之间带参数的跳转了
 
                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。
                            

• 上一篇：vue实现跨域请求的设置下一篇：React antd如何实现<Upload>