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頁面之間帶參數的跳轉了