Uniapp页面路由方法封装

页面路由

类似HTML中的 <a> 组件，但只能跳转本地页面。目标页面必须在pages.json中注册

自带方法

• uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。url有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码。

• uni.redirectTo

关闭当前页面，跳转到应用内的某个页面

• uni.reLaunch

关闭所有页面，打开到应用内的某个页面。如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

• uni.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

• uni.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。（调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。）

• uni.preloadPage

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快

简单封装

var utils = {};
//公共处理方法
utils.install = function(Vue, option) {
  // 页面跳转
  Vue.prototype.jump = function(path) {
    uni.navigateTo({
    	url: path
    })
  };
  // 返回
  Vue.prototype.back = function(obj) {
	uni.navigateBack(obj);
  };
  // 带参跳转
  Vue.prototype.togo = function(url,data){
  	url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  	uni.navigateTo({  
  		url
  	}) 
  };
  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) : ''
  };
  
  // 获取登录用户
  Vue.prototype.getUserInfo = function() {
	let res = uni.getStorageSync('userInfo');
	if (res) {
		return res
	} else {
		return {}
	}
  };
};

export default utils;

项目使用

1、在 main.js 中use一下就可以在页面用了

import utils from './common/util.js'
Vue.use(utils)

2、携带 userid 跳转到 order 页面

togoOrderList(userid) {
  this.togo('/pagesOther/personal/order',{userId: userid})
}

路由总结

1. App平台仅支持预加载 nvue 页面，执行页面预渲染，预载时触发生命周期 onLoad，onReady，不触发 onShow
2. 打开新页面时，url 完全相同（包含参数）时，优先使用预加载页面，触发生命周期 onShow
3. tabbar页面，仅支持预加载尚未显示过的页面，否则返回 fail，提示 already exists
4. 同一时间，相同 url 仅 preloadPage 一次
5. 当同一个预载页面已被打开(在路由栈)，再次打开相同url时，不再使用该预加载页面，而是打开新的非预载页面
6. uni.reLanuch, uni.switchTab, uni.navigateBack(含Android返回键) 切换页面时，预加载页面不会被销毁，仅触发生命周期 onHide
7. 在预载页面使用 uni.redirectTo 时，预加载页面会被销毁，触发生命周期 onUnload