1.概述

在手机端，我们使用的时UNIAPP框架。在数据传递的时候，我们使用

var url=`/pages/${item.module}/${item.routeName}`+params;
uni.navigateTo({url: url})

参数跟在组件后面传递。这种方式会在浏览器中显示编码过的参数，不是很优雅。

2. 解决办法

可以使用命名路由。

比如：

{
    "name": "customForm",
    "path": "pages/list/CustomForm",
    "style": {
        "navigationBarTitleText": "单据录入"
    }
},

我们是可以使用如下代码传递路由。

router.push({name:"customForm",params:{}})

这种方式其实和 vue-router 还是有些差别，当params的参数有复杂的JSON的时候，打开的页面取数据方法是有所变化的。

需要通过 this.$route.params.query 来获取数据。

推荐使用VUEX传递数据

比较理想的方法传递参数可以使用 vuex 。

具体做法为：

• 在VUEX增加代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    //传递临时数据
    tmpData:{}
  },
  mutations: {
    setTmpData(state,tmpData){
      state.tmpData = tmpData
    }
  },
})

export default store

• 调用VUEX 设置数据

//构造方法
...mapMutations(['setTmpData']),

//在页面跳转之前传递数据。
gotoCustomForm(data){
    this.setTmpData(data);
    router.push({name:"customForm"})
},

• 获取传递的数据

computed: {
            ...mapState(['curUser','tmpData']),
        },
        created() {
      //获取临时传递的参数。
        this.params = this.tmpData;

使用mapState 获取数据。