update
迁移文档 小爱为你推荐使用新版本哦~~

# 从 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

loadingreplaceStyleresetStyle 移除是介于使用率过低,导致占用空间变大。如需页面加载动画可以看看Vueg----page-transition-pluginrewriteFun v2.0.0 起不干涉原本的api。keepUniInterceptuseUniConfig 已调整为默认禁用。

# 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

routerBeforeEachrouterAfterEach 调整为管道放行,也就是说提供了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端退出应用

# 可捕捉的退出动作

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