uni-app 的router方案（大佬寫的插件，借用一下並宣傳）

時間 2019-11-20

標籤 uni app router 方案大佬寫的插件借用一下宣傳简体版

原文原文鏈接

項目地址 githup :https://github.com/SilurianYang/uni-simple-router

uni-simple-router

一個更爲簡潔的Vue-router，專爲 uni-app 量身打造

簡介說明:

是否你也曾感嘆過爲啥官方就不搞一個相似 Vue-router 同樣的路由管理器？苦苦尋找。搜遍百度？社區？以及 Google？甚至是官方的各大 QQ 羣？難受沒找到！直到此插件出來以前也沒有一個更好的解決方法。因而它，沒錯，就是它，它誕生了。只要你會使用 Vue-router 便可立刻上手，下面文檔的徹底不用看。它保留了 Vue-router 徹底類似的書寫風格，讓你倍感親切 !vue

大綱

安裝node

NPM

複製代碼npm install uni-simple-router

若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能：git

複製代碼import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

組件式的導航 1.2.2+github

這是一個很難抉擇的問題？加仍是不加這是一個問題！爲了讓開發者更快捷，最後仍是封裝上了 router-link 組件。爲了能知足多端這裏必須批評下 微信小程序，它要搞特殊。沒得辦法的！因此無法幫大家註冊組件。它那玩意只能在 main.js 中才能註冊組件！！！！很少說了，直接上代碼。npm

註冊組件：編程

複製代碼// main.js

import routerLink from './node_modules/uni-simple-router/component/router-link.vue'
Vue.component('router-link',routerLink)

使用組件：小程序

複製代碼// xxxx.vue

<router-link to="{name: tabbar-4,params: {name: '我只想去tab5的router-link'}}" navType="pushTab">
  <button type="primary">使用name對象跳轉</button>
</router-link>

<router-link to="{path: '/pages/tabbar/tabbar-4/tabbar-4',query: {name: '我只想去tab5的router-link'}}" navType="pushTab">
  <button type="primary">使用path對象跳轉</button>
</router-link>

<router-link to="{path: '/tabbar-4/tabbar-4,query': {name: '我只想去tab5的router-link'}}" navType="pushTab" :level="2" :append="true">
  <button type="primary">使用path對象繼承父路徑跳轉</button>
</router-link>

<router-link to="/pages/tabbar/tabbar-4/tabbar-4" navType="pushTab">
  <button type="warn">經過路由path直接跳轉</button>
</router-link>

<router-link to="/tabbar-4/tabbar-4" navType="pushTab" :level="2" :append="true">
  <button type="warn">經過路由path繼承父路徑跳轉</button>
</router-link>

<router-link to="/tabbar-4/tabbar-4" navType="pushTab" :level="2" :append="true" :stopNavto="true">
  <button type="default">阻止組件事件,不會跳轉</button>
</router-link>

prop：

參數	類型	必填	默認值	描述
to	String	是		須要跳轉的路徑。能夠是字符串對象，也能夠是一個絕對路徑，也能夠是一個相對路徑
stopNavto	Boolean	否	false	默認綁定事件爲點擊事件，不阻止。
navType	String	否	push	須要跳轉的 NAVTYPE類型
level	Number	否	1	相對於當前頁面路徑，以 / 從後往前裁切的層級。append 爲true時生效
append	Boolean	否	false	是否相對於當前頁面路徑跳轉。根據 level 層級截取的路徑拼接 to 。只針對使用path跳轉的狀況

編程式的導航微信小程序

廢棄全部 uni-app 路由與頁面跳轉 Api,擁抱編程式導航。api

router.push(location, onComplete?, ?) 等同於 uni.navigateTo()

注意：在 Vue 實例內部，你能夠經過 \$Router 訪問路由實例。所以你能夠調用 this.\$Router.push。瀏覽器

想要導航到不一樣的 URL，則使用 this.\$Router.push 方法。這個方法會向 history 棧添加一個新的記錄，因此，當用戶點擊後退按鈕時，則回到以前的 URL。

該方法的參數能夠是一個字符串路徑，或者一個描述地址的對象。例如：

複製代碼// 字符串
this.$Router.push('/pages/router/router1')

// 對象
this.$Router.push({path:'/pages/router/router1'})

// 命名的路由
this.$Router.push({ name: 'router1', params: { userId: '123' }})

// 帶查詢參數，變成 /router1?plan=private
this.$Router.push({ path: 'router1', query: { plan: 'private' }})

注意：若是提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種狀況。因此字符串時必須是絕對的路徑，name 時傳遞的參數必須爲 params，相反 path 必須對應 query。

router.replace(location, onComplete?, ?) 等同於 uni.redirectTo()

跟 router.push 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。

複製代碼this.$Router.replace(...)

router.replaceAll(location, onComplete?, ?) 等同於 uni.reLaunch()

跟 router.replace 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是將全部的頁面都關掉，打開一個新的頁面。

複製代碼this.$Router.replaceAll(...)

router.pushTab(location, onComplete?, ?) 等同於 uni.switchTab()

跟 router.push 很像，打開指定的 tab 菜單。

注意：router.pushTab 在傳遞參數的時候 H5 暫時不支持，須要開發者自行處理下，這是官方的一個 bug,後續會修復。不過可使用此一個變通的方法獲取到,臨時解決！

複製代碼this.$Router.pushTab(...)

//變通方法獲取參數 H5端

const router = new Router({
    routes:[
        {
                path: "/pages/tabbar/tabbar-4/tabbar-4",
                name: 'tabbar-4',
                H5Params:{
                    H5Name:''       //使用一個臨時變量來存儲
                },
                beforeEnter:(to,from,next)=>{   
                    to.H5Params.H5Name=to.query.name
                    next();
                }
        },
    ]
})

//獲取方式
this.$Route.H5Params.H5Name

注意:使用變通方法時能夠在臨時變量上覆制，雖然this.$Route.query沒法獲取到，可是禁用路由守衛時是攜帶完整參數的，全部能夠再此作一些手腳。頁面刷新後參數將會丟失。

router.back(n) 等同於 uni.navigateBack()

這個方法的參數是一個整數，意思是在 history 記錄中後退多少步，相似 window.history.go(n)。

例子

複製代碼// 後退 2 步記錄
this.$Router.back(2)

// 若是 history 記錄不夠用，那就默默地失敗唄
this.$Router.back(100)

命名路由

有時候，經過一個名稱來標識一個路由顯得更方便一些，特別是在連接一個路由，或者是執行一些跳轉的時候。你能夠在建立 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

複製代碼const router = new Router({
    routes: [
        {
            path: "/pages/router/router1/router1",
            name: 'router1'
        }, {
            path: "/pages/router/router2/router2",
            name: 'router2',
            beforeEnter:(to,from,next)=>{
                next({name:'router3',params:{msg:'我是從router2路由攔截過來的'}});
            }
        }, {
            path: "/pages/router/router3/router3",
            name: 'router3',
            beforeEnter:(to,from,next)=>{
                next();
            }
        }
    ]
});

要連接到一個命名路由，能夠給 router.push() 屬性傳一個對象：

複製代碼this.$Router.push({ name: 'router1', params: { userId: '123' }})

路由傳參

在組件中使用 $Route 來獲取當前路由表中的配置及參數。由於路由傳值方面官方目前僅提供了query的方式進行傳參，因此到目前爲止uni-simple-router也僅支持query的獲取方式。爲了兼容H5手動刷新後參數丟失的問題。其次在 \$Route 對象中依然保留了 params 選項後續會補上。

數據傳參時儘可能不要傳遞深度對象，雖然中間有作一層操做。始終不能百分百還原。在深度對象傳遞的過程當中，深度對象將會抹平成一個大對象。並且在參數傳遞的過程當中傳遞的數據將會變成字符串

深度對象可傳遞 1.2.2+

例子

複製代碼// 假如你是經過name 來進行跳轉。
this.$Router.push({ name: 'router1', params: { userId: '123' }})

// 獲取方式
this.$Route.query.userId;

// 一樣 等同於
this.$Router.push({ path: '/pages/router/router1/router1', query: { userId: '123' }})

// 獲取方式
this.$Route.query.userId;

導航守衛

正如其名，uni-simple-router 提供的導航守衛主要用來經過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程當中：全局的, 單個路由獨享的。

記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你能夠經過觀察 \$Route 對象來應對這些變化。

全局前置守衛

你可使用 router.beforeEach 註冊一個全局前置守衛：

複製代碼const router = new Router({....})

router.beforeEach((to, from, next) => {
  // ...
})

當一個導航觸發時，全局前置守衛按照建立順序調用。守衛是異步解析執行，此時導航在全部守衛 resolve 完以前一直處於 等待中 。

每一個守衛方法接收三個參數：

to: Route: 即將要進入的目標路由對象
from: Route: 當前導航正要離開的路由
next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
- next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed (確認的)。
- next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了 (多是用戶手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到 from 路由對應的地址。
- next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。你能夠向 next 傳遞任意位置對象

確保要調用 next 方法，不然鉤子就不會被 resolved，同時在使用 next() 時，若是想導航到新的地址，這時就須要在 next() 傳遞一個NAVTYPE指定類型跳轉。

例子

複製代碼router.beforeEach((to, from, next) => {
    if (to.name == 'tabbar-5') {
        next({
            name: 'router4',
            params: {
                msg: '我攔截了tab5並重定向到了路由4頁面上',
            },
            NAVTYPE: 'push'
        });
    } else{
    next();
  }
})

很顯然這是一個全局的生命鉤子函數，當發現跳轉的路由名稱爲 'tabbar-5' 時，中間進行攔截並重定向到名爲 'router4' 的路由下,而顯然易見的是 'tabbar-5' 是經過 pushTab Api進行跳轉的，而 'router4' 則是一個普通的頁面，應該使用 push 方法進行跳轉。全部這時的咱們須要提供一個 NAVTYPE 來指定這次跳轉須要使用什麼方法。若是地址爲同一類型時無需傳遞此參數。

全局後置鉤子

你也能夠註冊全局後置鉤子，然而和守衛不一樣的是，這些鉤子不會接受 next 函數也不會改變導航自己：

複製代碼router.afterEach((to, from) => {
  // ...
})

路由獨享守衛

你能夠在路由配置上直接定義 beforeEnter 守衛：

複製代碼const router = new Router({
    routes: [
         {
            path: "/pages/router/router2/router2",
            name: 'router2',
            beforeEnter:(to,from,next)=>{
                next({name:'router3',params:{msg:'我是從router2路由攔截過來的'}});
            }
        }, {
            path: "/pages/router/router3/router3",
            name: 'router3',
            beforeEnter:(to,from,next)=>{
                next();
            }
        }
    ]
});

這些守衛與全局前置守衛的方法參數是同樣的。

路由元信息

定義路由的時候能夠配置任何本身須要的參數

複製代碼const router = new Router({
    routes: [{
        path: "/pages/router/router1/router1"",
        name: 'router1',
        meta:{
            title:'H5中須要的title',
            disable:true
        },
        //xxxxx
    }]
});

首先，咱們稱呼 routes 配置中的每一個路由對象爲路由記錄。一個路由匹配到的全部路由記錄會暴露爲 $Route 對象 (還有在導航守衛中的路由對象)下。所以，須要的時候能夠自行獲取。

下面例子展現在全局導航守衛中檢查元字段：

複製代碼router.beforeEach((to, from, next) => {
  if (to.meta&&to.disable) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.meta.title }
      })
    } else {
      next()
    }
  } else {
    next() // 確保必定要調用 next()
  }
})

H5路由跳轉進度條 1.2.2+

複製代碼import Vue from 'vue'
import Router from 'uni-simple-router';

Vue.use(Router);

const router = new Router({
    loading:false,  //默認爲開啓狀態，可不傳遞。
    routes: [{
      path: "/pages/tabbar/tabbar-1/tabbar-1",
      name: 'tabbar-1'
    },
    {
      path: "/pages/tabbar/tabbar-2/tabbar-2",
      name: 'tabbar-2'
    },
    ]
});

完整的導航解析流程

導航被觸發。
調用全局的 beforeEach 守衛。
在路由配置裏調用 beforeEnter。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。

首次觸發生命鉤子注意事項 1.2.2+

首次啓動依次觸發全局鉤子、組件獨享鉤子。
在app.vue 中跳轉時會得到 ONLAUNCH: true 的標識，回顯在每一個鉤子的同to、from 下。同時你也能夠經過 this.\$Route 獲取到。
在next() 中攔截跳轉時必須明確的給出標識NAVTYPE,不然沒法跳轉。在頁面同類型時能夠忽視。

NAVTYPE取值類型 1.1.0+

1. push