uni-vue-router (uni-app vue-router API）

描述:

uni-app框架路由：

• 类vue api的router（支持typescript） uni-vue-router
• 按照约定目录自动生成router的config（省去维护pages.json的两套路由配置）

主要解决uni-app自带跳转问题

• 无路由 watch
• 页面路径很差聚合管理
• 无路由钩子
• 须要手动拼接参数列表
• 特殊字符等好比'@'转码问题
• 对代码侵入性大，不太好移植vue H5
• ...

部分uni-vue-router文档

• router for uniapp based on project file structure ( mainly reference vue-router , nuxt )
• support typescript
• support basic vue-router API

Development setup

npm install --save uni-vue-router
复制代码

import Router, { Route, NextFn } from 'uni-vue-router';

Vue.use(Router);

const router = new Router();

new App({
    router,
    render: h => h(App),
}).$mount();
复制代码

Basic Usages

App.vue初始化最初的 $route

onLaunch(options) {
  //first time init current route
     this.$router.transitionTo({
         path:options && options.path,
         query:options && options.query
     });
     console.log('App Launch');
 },
复制代码

this.$router.push({
    name:'bookings-detail',
    path:'/pages/bookings/detail/index'
})
复制代码

@Watch('$route',{
    immediate: true
})function(newVal:Route,oldVal:Route) {
    console.log('$route changed!',newVal,oldVal,this.$route)
}
复制代码

router.beforeEach((to: Route, from: Route, next: NextFn) => {
    console.log('[beforeEach] to from:', to, from);
    if (to.name === 'bookings-detail') {
        // return;
    }
    next();
});

router.beforeEach((to: Route, from: Route, next: NextFn) => {
    console.log('[beforeEach]:', to, from, next);
    next();
});

router.afterEach((to: Route, from: Route) => {
    console.log('[afterEach] to from:', to, from);
});
router.afterEach((to: Route, from: Route) => {
    console.log('[afterEach]:', to, from);
});

复制代码

API

API Map

路由方法映射关系

{
    push: 'navigateTo',
    pushTab: 'switchTab',
    replace: 'redirectTo',
    replaceAll: 'reLaunch',
    back: 'navigateBack',
};
复制代码

api reference vue-router API

push(location: RawLocation, onComplete?: VoidFn, onAbort?: VoidFn)
push(location).then(onComplete).catch(onAbort)
pushTab(location: RawLocation, onComplete?: VoidFn, onAbort?: VoidFn)
beforeEach(beforeHook, onComplete?: VoidFn, onAbort?: VoidFn)
afterEach(afterHook, onComplete?: VoidFn, onAbort?: VoidFn)
transitionTo(location: RawLocation) //在 onTabItemTap以及onLaunch里面 这种非手动调用的地方手动调用更新 $route
复制代码

目录生成路径的Example

├── pages
│   ├── bookings
│   │   ├── detail
│   │   │   └── index.vue
│   │   ├── index.vue
复制代码

[
    {path: "/pages/bookings/detail/index",name:"bookings-detail"},
    {path: "/pages/bookings/index", name: "bookings"}
 ]
复制代码

约定目录描述

1. 路由目录下必须有一个 index.vue
2. path => name 例子： 'pages/bookings/detail/index.vue' => bookings-detail
3. 文件名不能包含中横线，容易致使路径冲突（eg: pages/bookings/detail/index.vue 跟 pages/bookings-detail/index.vue 会转为相同的name）

uni自带跳转问题

0. 无路由 watch
1. 页面路径很差聚合管理
2. 无路由钩子
3. 须要手动拼接参数列表
4. 传特殊字符时会发现参数被截断（好比传二维码信息）缘由是不能包括（=&?）等特殊字符
5. 无路由嵌套

问题

• router-view （uni-app 访问不到root.$parent）
• router-link （uni-app 不支持在Vue.install里面挂载组件，因此如今的router-link是无效的）

todos

• 完善 模拟的 history stack
• add tslint, pretty, test
• nested(方便路由钩子权限管理) router