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