1. 程式人生 > >vue頁面跳轉引數傳遞

vue頁面跳轉引數傳遞

前段時間專案用vue搭建整個前端頁面,我負責的模組有個地方在頁面跳轉時得將引數傳遞到下一個頁面,但是由於引數較多,用url帶引數傳遞不是特別好,我嘗試了多種方法想在頁面之間傳遞引數都沒成功,最後想到了vuex,當時又是剛開始學vue對vuex更是瞭解不多廢了一點時間,好在問題解決了,下面分享我解決問題的程式碼,希望對大家有所幫助。

一.頁面跳轉通過路由帶引數傳遞資料

// 1.頁面中的程式碼
this.$router.push({
    name: 'generalAdminOrderFlowAdd',
    params: {
      type: 'add',
      templateType: this.
orderTemplateType } }) // 2.路由中的程式碼 { path: ':type/:templateType', name: 'generalAdminOrderFlowAdd', component: require('@/components/generalAdmin/order/orderFlow') } // 3.獲取頁面中的引數值 let type = this.$route.params.type

二.使用vuex進行資料傳遞

// 1.index.js頁面程式碼
import Vue from 'vue'
import Vuex from
'vuex' import mutations from './mutations' import actions from './actions' import getters from './getters' Vue.use(Vuex) const state = { order: {} //宣告order物件 } export default new Vuex.Store({ state, mutations, actions, getters })
//2. getters.js頁面的程式碼
export default {
 // 宣告獲取order的方法
  getOrder (state) {
    return
state.order } }
//3. mutation.js頁面的程式碼
export default {
//設定order的值
  SET_ORDER (state, order) {
    state.order = order
  }
// 4.在頁面中設定呼叫set方法設定全域性order的值
this.$store.commit('SET_ORDER', order)// SET_ORDER為order值的設定方法的方法名
// 5.獲取全域性的order值
 // 從vuex中獲取order
let template = this.$store.state.order