vux 页面参数传递

墨蓝 2022-05-16 07:13 232阅读 0赞

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地址中**

**![70][]**

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

[70]: /images/20220516/a85b8a2d9b214cf0b2e74f7f9c5b88d3.png