update
uni-simple-router 3.0 版本已发布，欢迎你的使用！
uni-simple-router

# 从 Router 1.x 迁移

# FAQ

哇，非常长的一页！是否意味着 uni-simple-router 2.0 已经完全不同了呢，是否需要从头学起呢，uni-simple-router1.0 的项目是不是没法迁移了？

非常开心地告诉你，并不是！几乎 95% 的 API 和核心概念都没有变。因为本节包含了很多详尽的阐述以及许多迁移的例子，所以显得有点长。不用担心，你不必从头到尾把本节读一遍！

# 配置

# RouteConfig.h5 移除

const router = createRouter({
    h5:{
        rewriteFun:true,     //移除
        loading:true,     //移除
        useUniConfig:true,  //移除
        keepUniIntercept:false,     //移除
        replaceStyle:false，    //移除
        resetStyle:()=>JSON.parse('{}'),    //移除
    }
});
1
2
3
4
5
6
7
8
9
10

loading、replaceStyle、resetStyle 移除是介于使用率过低，导致占用空间变大。如需页面加载动画可以看看Vueg----page-transition-plugin。rewriteFun v2.0.0 起不干涉原本的api。keepUniIntercept、useUniConfig 已调整为默认禁用。

# RouteConfig.APP 移除

const router = createRouter({
    APP:{
        switchPageOutTime:1000,     //移除
        holdTabbar:true,     //移除
        launchedHook:()=>{      //新增
            plus.navigator.closeSplashscreen();
        }
    }
});
1
2
3
4
5
6
7
8
9

移除 的选项在新版中不受影响。新增 的选项由以前的 loddingPageHook 函数关闭 plus.navigator.closeSplashscreen(); 调整到 launchedHook 函数中。

# onBeforeBack页面钩子 移除








 
 
 
 
 
 
 
 
 


// xxx.vue
export default {
    data() {
        return {

        };
    },
    onBeforeBack(args){
        return new Promise(resolve=>{
            setTimeout(()=>{
                resolve();
            },3000)
        })
        //or
        return true //阻止页面关闭
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# RouteConfig.platform 新增

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,   
});
1
2
3

调整 运行时到编译时，由 100+kb 直降 30kb。

# RouteConfig.keepUniOriginNav 新增

const router = createRouter({
    keepUniOriginNav:false,
});
1
2
3

开启是否对 uni-app 原生api进行拦截。使原生api跳转能达到同插件api跳转同样的效果！不建议关闭!

# RouteConfig.hooks 调整

const router = createRouter({
    routerBeforeEach: (to, from, next) => { 
        next()
    },
    routerAfterEach: (to, from) => {},
    routerErrorEach: (error, router) => {       //新增
        err(error, router, true)
    },
});
1
2
3
4
5
6
7
8
9

routerBeforeEach、routerAfterEach 调整为管道放行，也就是说提供了routerBeforeEach钩子必须执行next() 否则后续无法跳转。routerErrorEach则为跳转失败，或者跳转中遇到错误进入。请注意各个钩子的参数

# RouteConfig.detectBeforeLock 新增

const router = createRouter({
    detectBeforeLock:(router, to, navType) => {
        //可以在这里面解锁等等
    }
});
1
2
3
4
5

以前的解锁状态你可能放在 routerBeforeEach，现在你可以放在 detectBeforeLock 中精确的解锁。

# RouteConfig.resolveQuery / RouteConfig.parseQuery 新增

const router = createRouter({
    resolveQuery:jsonQuery => jsonQuery,
    parseQuery:jsonQuery => jsonQuery
});
1
2
3
4

resolveQuery 跳转之前把参数传递给此函数、返回最终的数据！有此函数不走默认方法。parseQuery 读取值之前把参数传递给此函数，返回最终的数据！有此函数不走默认方法。

# 注册

# 路由注册

  1. 调整以前使用new关键字到Function 构造


 
 
 
 
 










//  router/index.js
import Vue from 'vue'
import {RouterMount,createRouter} from 'uni-simple-router'
const router = createRouter({
     platform: process.env.VUE_APP_PLATFORM,
     routes: [...ROUTES]
})
router.beforeEach((to, from, next) => {
  next()
})
router.afterEach((to, from) => {
})
export {
	router,
	RouterMount
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  1. 新的挂载方式，传入 router 实例挂载。



 
 












//main.js
import Vue from 'vue'
import App from './App'
import {router,RouterMount} from './router'
Vue.use(router)
App.mpType = 'app'
const app = new Vue({
	...App
})
// #ifdef H5
    RouterMount(app,router,'#app')
// #endif

// #ifndef H5
    app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  1. vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import routerLink from './node_modules/uni-simple-router/component/router-link.vue'
//路径改为
import Mylink from './node_modules/uni-simple-router/dist/link.vue'
1
2
3

# 页面生命周期

# APP.vue 生命周期的处理

以前的 onLaunch 可以通过返回一个 promise 来处理异步，并保证index.vue 下的生命周期能按预期执行。v2.0.0起，你将调整为在全局守卫下执行。onLaunch 将不做异步处理！

# 以前的写法

//app.vue 
export default {
  onLaunch: function() {
	  return new Promise(resolve=>{
		  setTimeout(()=>{  
			  console.log('onLaunch')
              resolve();
		  },3000)
	  })
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 现在的写法

//app.vue 
export default {
  onLaunch: function() {
	console.log('onLaunch')
  }
};
// router.js 
router.beforeEach((to, from, next) => {
    setTimeout(()=>{  
        next();
    },3000)
});
1
2
3
4
5
6
7
8
9
10
11
12

# onBeforeBack调整为beforeRouteLeave








 
 
 
 
 



<script>
	export default {
		data() {
			return {

			};
		},
		beforeRouteLeave(to, from, next) {   
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
			next();
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 在APP.vue 下获取 $Route





 
 
 



 
 
 





<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			this.$AppReady.then(()=>{
				console.log(this.$Route)	
			})
		},
		onShow: function() {
            console.log('App Show')
			this.$AppReady.then(()=>{
				console.log(this.$Route)	
			})
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

为了能正确在 app.vue 下获取 $Route 属性，请按上面的写法来进行。因为在 app端 app.vue 下的生命周期是优先执行于页面的，也就是说页面并没有产生。这时候你需要等待页面完成才能正确获取 $Route属性。如果你不想使用异步写法，你也可以直接 this.$Route 这样写。但是如果你想同时兼容小程序、app、h5 请按上面的写法来进行。

# app端退出应用

# 可捕捉的退出动作

退出动作对 ios 无影响、主要表现在安卓手机上物理返回按钮。默认是按下无动作反馈，需要自己调用退出程序。 完整请查看这里

# app端显示首屏加载层

# 等待页加载动画







 














const router = createRouter({
    APP:{
        //设置等待页面背景色
        loddingPageStyle:()=>JSON.parse('{"backgroundColor":"#96DBF3"}'),   
        //通过启动页生命钩子绘制加载gif
        loddingPageHook:(view)=>{  
            plus.navigator.closeSplashscreen();
            view.show();
            view.drawBitmap('/static/wait.gif', {}, {
                top: 'auto',
                left: 'auto',
                width: '200px',
                height: '200px'
            })
        }
    }, 
    routes:[
        // ....
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

如果你不想使用 uni-app 启动时的加载样式，你也可以自己实现一个原生的。但是在绘制原生加载页面时请关闭掉 uni-app 的默认加载页面。具体关闭方法请看上面 糟色部分 ！如果你没关闭 uni-app 默认加载页，即使你绘制了自己的加载页，它也不会显示出来。具体的请看这里