[前后端分离项目之 vue 框架经验总结]
文 / 朱季谦
在 vue 框架的前端页面上, 若要实现页面之间的带参数跳转, 可参考以下实现过程:
例如, 点击截图中的 "查看试卷", 可实现带参跳转到相应的试卷页面, 该功能类似查看试卷的详情页面:
假如以上所在页面为 "试卷管理. vue", 需跳转到页面为 "查看试卷. vue".
1. 在试卷管理. vue 页面里, 点击 "查看试卷" 按钮的相应代码如下:
<span @click="seeExa(scope.row)" class="mr15"> 查看试卷 </span>
2. 点击后会执行对应的 seeExa(e) 方法, 把实现跳转的代码写到该方法里, 代码如下:
- seeExa(e) {
- Windows.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 页面之间带参数的跳转了.
来源: https://www.cnblogs.com/zhujiqian/p/10803530.html