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中获取orderlet template = this.$store.state.order