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