记录uniapp路由跳转封装

1、建一个util.js文件

/**
 * 跳转到指定页面url
 * 支持tabBar页面
 * @param {string}  url   页面路径
 * @param {object}  query 页面参数
 * @param {string}  modo  跳转类型(默认navigateTo)
 */
export const navTo = (url, query = {}, mode = 'navigateTo') => {
	if (!url || url.length == 0) {
		return false
	}
	// tabBar页面, 使用switchTab
	if (inArray(url, getTabBarLink())) {
		uni.switchTab({
			url: `/${url}`
		})
		return true
	}
	// 生成query参数
	const querySrc = !isEmpty(query) ? `?${urlEncode(query)}` : ''
	// 普通页面跳转，使用navigateTo
	mode === 'navigateTo' && uni.navigateTo({
		url: `/${url}${querySrc}`
	})
	// 特殊指定，使用redirectTo
	mode === 'redirectTo' && uni.redirectTo({
		url: `/${url}${querySrc}`
	})
}

/**
 * 判断是否为空对象
 * @param {*} object 源对象
 */
export const isEmptyObject = (object) => {
	return Object.keys(object).length === 0
}

/**
 * 判断是否为数组
 *@param {*} array
 */
export const isArray = (array) => {
	return Object.prototype.toString.call(array) === '[Object Array]'
}

/**
 * 判断是否为对象
 *@param {*} Obejct
 */
export const isObject = (object) => {
	return Object.prototype.toString.call(object) === '[Object Obejct]'
}

/**
 * 判断是否为空
 * @param {*} object 源对象
 */
export const isEmpty = (value) => {
	if (isArray(value)) {
		return value.length === 0
	}
	if (isObject(value)) {
		return isEmptyObject(value)
	}
	return !value
}

/**
 * 对象转URL参数格式
 * {id:111,name:'xxx'} 转为 ?id=111&name=xxx
 * @param {object} obj
 */
export const urlEncode = (obj = {}) => {
	const result = []
	for (var key in obj) {
		let item = obj[key]
		if (!item) {
			continue
		}
		if (isArray(item)) {
			item.forEach(i => {
				result.push(`${key}=${i}`)
			})
		} else {
			result.push(`${key}=${item}`)
		}
	}
	return result.join('&')
}
/**
 * 是否在数组内
 */
export const inArray = (search, array) => {
	for (var i in array) {
		if (array[i] == search) return true
	}
	return false
}

2、在main.js中全局挂载

import Vue from 'vue'
import App from './App'
import store from './store'


//引入路由跳转方法
import { navTo } from './common/util.js'
// 全局挂载
Vue.prototype.$navTo = navTo

Vue.config.productionTip = false
App.mpType = 'app'

Vue.prototype.$store = store
const app = new Vue({
	...App,
	store
})
app.$mount()

3、在页面中使用

goGridDetail(item) {
				// uni.switchTab({
				// 	url: '/pages/classify/classify'
				// })
				this.$navTo('pages/classify/classify')
			}


goClassifyDetail(detail) {
				console.log("detail",detail)
				// uni.navigateTo({
				// 	// openId=13216484256&id=1009024
				// 	url: "/pages/classify/classifyDetail?openId=13216484256&id="+detail.id
				// })
				this.$navTo('pages/classify/classifyDetail',{openId:13216484256,id:detail.id})
			}

这样就ok啦！！！！

参考萤火商城v2.0开源版 [uni-app端]：git@gitee.com:xany/yoshop2.0-uniapp.git