【从零开始搭建uniapp开发框架】（八）—— 页面跳转封装

框架开源地址：https://gitee.com/yunhaotian/uniapp_mobileFrame

本框架使用了分包机制，具体内容在 【从零开始搭建uniapp开发框架】（三）—— uniapp设置分包机制

根据本框架使用了分包封装统一的页面跳转方法封装

在 common 文件夹下新建 sju.nav.js 文件

 

 

 

 

 

 

 

sju.nav.js源码：

 

/**
 * 页面跳转的相关方法
 */

import base from '@/common/sju.base.js';
import login from '@/common/sju.login.js'

/**
 * @description url地址的转换
 * <br/>pages内页面访问,参数路径规范:/页面名
 * <br/>pages内子目录中页面访问,参数路径规范:/子目录名/页面名,实际访问页面:/pages/子目录名/页面名/页面名,
 * <br/>分包页面访问,参数路径规范:/分包名/页面名,实际访问页面:/sub_分包名/pages/页面名/页面名
 */
function tranferUrl(url) {
	//地址和参数分离
	let para = '';
	if (url.indexOf('?')) {
		let arrPara = url.split('?');
		url = arrPara[0];
		para = arrPara[1];
	}
	//获取页面名称
	let arrPath = url.split('/');
	let fileName = arrPath[arrPath.length - 1];
	//处理路径
	let count = url.split('/').length;
	let result;
	if (count == 2) {
		//pages内页面访问
		result = "/pages/";
	}
	if (count == 3) {
		if (url.indexOf('tab') > 0) {
			//tab页面
			result = "/pages/tab/";
		} else {
			//分包页面
			let path = arrPath[1];
			result = "/sub_" + path + "/pages/";
		}
	}
	//拼接页面名称
	result += fileName + "/" + fileName;
	//拼接参数
	if (base.isNotNull(para))
		result += "?" + para;
	//输出结果
	base.logInfo('tranferUrl:' + result);
	return result;
}

let nav = {
	/**
	 * @description 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
	 * @param {string} url 跳转的地址
	 */
	navigateTo: function(url) {
		// 判断打开页面是否需要登录
		if (login.checkLogin(url)) {
			url = tranferUrl(url);
			uni.navigateTo({
				url: url,
				fail: function() {
					base.logInfo('navigateTo 失败');
				}
			})
		}
	},
	/**
	 * @description 关闭当前页面，跳转到应用内的某个页面。
	 * @param {sting} url 跳转的地址
	 * @param {string} para 页面参数
	 */
	redirectTo: function(url) {
		// 判断打开页面是否需要登录
		if (login.checkLogin(url)) {
			url = tranferUrl(url);
			uni.redirectTo({
				url: url,
				fail: function() {
					base.logInfo('navigateTo 失败');
				}
			});
		}
	},
	/**
	 * @description 关闭所有页面，打开到应用内的某个页面。
	 * @param {sting} url 跳转的地址
	 * @param {string} para 页面参数
	 */
	reLaunch: function(url) {
		// 判断打开页面是否需要登录
		if (login.checkLogin(url)) {
			url = tranferUrl(url);
			uni.reLaunch({
				url: url,

				fail: function() {
					base.logInfo('reLaunch 失败')
				}
			})
		}
	},
	/**
	 * @description 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
	 * @param {sting} url 跳转的地址
	 */
	switchTab: function(url) {
		if (login.checkLogin(url)) {
			url = tranferUrl(url);
			uni.switchTab({
				url: url,
				fail: function() {
					base.logInfo('switchTab 失败')
				}
			})
		}
	},
	/**
	 * @description 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
	 * @param {number} delta 返回的页面数
	 */
	navigateBack: function(delta) {
		uni.navigateBack({
			delta: delta
		});
	}
}
export default nav;

 

 

main.js引入封装类代码：

 

import sjuNav from './common/sju.nav.js'

Vue.prototype.sjuNav = sjuNav;

 

 

页面使用：

this.sjuNav.navigateTo('/my/list')