un-app uni.navigateTo页面跳转做封装传参

uni-app在页面跳转的时候是可以传参的，官方给的方法就是在路由后拼接传参地址

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

OBJECT参数说明

参数	类型	必填	默认值	说明	平台差异说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数	:-
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画	5+App
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms	5+App
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

示例

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

对于做开发的这种传参不太习惯，还是习惯了用一个字典作为传参数据

下面对uni.navigateTo做一下封装并带参数封装

首先单独写一个js文件用来封装页面跳转(注意：动画那些没有写进来，如果想要可以自己加)

navTo.js

const togo = function(url,data){
	url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
	
	uni.navigateTo({  
		url
	}) 
}

exprot function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

exprot {togo}

然后在main.js中注册全局变量

import * as navTo from '@/assets/navTo'
Vue.prototype.$navTo = navTo

最后调用（在vue页面）

<view @click="$navTo.togo('/pages/index/index',{type:1,name:'YanGo'})"></view>

或者在methods钩子也可以

methods: {
    to(){
        let url = '/pages/index/index'
        let param = {
            type:1,
            name: 'YanGo'
        }
        this.$navTo.togo(url,param)
    }
}