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