1. 程式人生 > >vux 頁面引數傳遞

vux 頁面引數傳遞

ux跳轉到指定介面 

this.$router.push({ path: url });

返回上一層 

this.$router.go(-1);

vux介面跳轉傳遞引數

一丶通過name來確定匹配的路由

this.$router.push({ path: '/init/doucfg/search',name:'search',params:{search:value}});

獲取引數方法:      this.$route.params.search;

name: "路由下面定義的name";

params : 上述例子傳遞是一個key為search的值

二丶通過path攜帶的引數

this.$router.push({ path: '/init/myadmexp/details/'+id});

獲取引數方法:    this.$route.params.id;

此方法需要在路由的path中配置   /:id

{
     path: 'myadmexp/details/:id',
     name: 'search',
     component: search

}

三丶通過query來傳遞引數,使用此方法傳遞的引數會出現在url地址中

this.$router.push({ path: '/init/myadmexp/details/',query:{id:code}});

獲取引數方法:      this.$route.query.id;

 

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

// 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