vue页面跳转参数传递
前段时间项目用vue搭建整个前端页面,我负责的模块有个地方在页面跳转时得将参数传递到下一个页面,但是由于参数较多,用url带参数传递不是特别好,我尝试了多种方法想在页面之间传递参数都没成功,最后想到了vuex,当时又是刚开始学vue对vuex更是了解不多废了一点时间,好在问题解决了,下面分享我解决问题的代码,希望对大家有所帮助。
·
前段时间项目用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
更多推荐
已为社区贡献2条内容
所有评论(0)