vux 頁面引數傳遞
阿新 • • 發佈:2018-12-20
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