核心提示:vue页面跳转参数传递,前段时间项目用vue搭建整个前端页面,我负责的模块有个地方在页面跳转时得将参数传递到下一个页面,但是由于参数较多,用url带参数传递不是特别好,我尝试了多种方法想在页面之间传递...
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