zoukankan      html  css  js  c++  java
  • 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",
     component: Exa

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

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

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

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

  • 相关阅读:
    JDE函数--获取当前登录人的描述
    JDE报表开发笔记(R5537011 收货校验统计表)
    JDE函数--GetUDC(B函数)
    JDE隐藏Constant等(Hide Object)
    Oracle “dba_tables”介绍
    word2013设置页面边框
    makefile--#的不正确使用
    CICS定时
    程序的命名
    UE上传到FTP,会多出些字符
  • 原文地址:https://www.cnblogs.com/zhujiqian/p/10803530.html
Copyright © 2011-2022 走看看