uni-app封装路由

由于uni-app没有vue中的全局钩子函数，所以封装了Router对象

• 首先我们创建一个JS文件，用于存放路由跳转的方法（文件路径src/utils/router.js）

class Router {
	constructor() {
		this.callBack = () => {};
	}

	beforeEach(callBack) {
		if (callBack instanceof Function) this.callBack = callBack;
	}

	push(to) {
		this.callBack('navigateTo', to);
	}

	redirectTo(to) {
		this.callBack('redirectTo', to);
	}

	reLaunch(to) {
		this.callBack('reLaunch', to);
	}

	switchTab(to) {
		this.callBack('switchTab', to);
	}

	back(delta) {
		// #ifdef H5
		history.back();
		// #endif
		// #ifndef H5
		uni.navigateBack({
			delta
		});
		// #endif
	}
}
// 导出并且实例化
export default new Router();

• 将Router对象挂载到全局 main.js中

import $mRouter from '@/utils/router';
Vue.prototype.$mRouter = $mRouter;

• 路由拦截操作，调用Router对象中的beforeEach方法（文件路径src/main.js）

// 路由导航
$mRouter.beforeEach((navType, to) => {
	if (to.route === undefined) {
		throw '路由钩子函数中没有找到to对象，路由信息:' + JSON.stringify(to);
	}
	// 去登录但是已经登录过了，则跳转到首页
	if (to.route === $mRoutesConfig.login.path && store.getters.hasLogin) {
		uni.reLaunch({
			url: $mHelper.objParseUrlAndParam($mRoutesConfig.main.path)
		});
		return;
	}
	// 过滤需要权限的页面
	// 查看是否需要路由权限验证
	if (to.route.requiresAuth) {
		if (store.getters.hasLogin) {
			// 已经登录
			uni[navType]({
				url: $mHelper.objParseUrlAndParam(to.route.path, to.query)
			});
		} else {
			// 登录成功后的重定向地址和参数
			const query = {
				redirectUrl: to.route.path,
				...to.query
			};
			uni.navigateTo({
				url: $mHelper.objParseUrlAndParam($mRoutesConfig.login.path, query)
			});
		}
	} else {
		uni[navType]({
			url: $mHelper.objParseUrlAndParam(to.route, to.query)
		});
	}
});

• .vue文件页面中使用

this.$mRouter.reLaunch({ route: '/pages/profile/profile' })

• 想知道uni-app如何封装request请求，请看这里