如何基于uniapp框架實(shí)現(xiàn)動態(tài)路由、動態(tài)tabbar？本篇文章就來給大家介紹一下uniapp動態(tài)路由實(shí)戰(zhàn)，手把手教大家在uniapp中實(shí)現(xiàn)動態(tài)路由。

uniapp用來開發(fā)app還是比較方便快捷的，官網(wǎng)教程挺細(xì)致，幾乎所有問題都能找到答案。網(wǎng)上也有不少入門教程，騰訊課堂、b站上有好幾個(gè)視頻教程，感覺還可以(其實(shí)我沒怎么看)，比較偏實(shí)戰(zhàn)，可以動手試一下。

本文假設(shè)閱讀者已經(jīng)基本掌握了uniapp的入門開發(fā)技能，如果還沒有掌握uniapp，但你準(zhǔn)備進(jìn)行相關(guān)開發(fā)，趕緊從官方文檔入手，再結(jié)合實(shí)戰(zhàn)視頻操作就好了，前面推薦的都不錯(cuò)。好了，進(jìn)入本文主題——如何基于uniapp框架實(shí)現(xiàn)動態(tài)路由、動態(tài)tabbar。

現(xiàn)狀分析

vue項(xiàng)目上有路由插件Vue Router，所有路由都是統(tǒng)一管理，可以統(tǒng)一攔截，控制下一步動作，但是在uniapp上，情況就不一樣了。uniapp上沒有路由插件，然后頁面分為tabbar和非tabbar兩種，頁面跳轉(zhuǎn)也有自己的一套api，最重要的路由攔截功能并不支持，所有的頁面都是在page.json文件里提前配置好。

需求分析

那假設(shè)我們要在app上做一套對應(yīng)著用戶權(quán)限的東西，就是不同用戶，根據(jù)權(quán)限配置，決定了他進(jìn)來后能用哪些頁面哪些按鈕，甚至是能控制到tabbar這塊。這個(gè)需求，就需要根據(jù)權(quán)限控制路由內(nèi)容及導(dǎo)向，但在目前條件下是實(shí)現(xiàn)不了的。不過在插件市場有不少人寫了路由插件，思路其實(shí)都是向web端的vue Router看齊的，能完整滿足需求的只有這個(gè)路由插件。

還有很重要的一個(gè)需求就是動態(tài)tabbar，這是一個(gè)很重要內(nèi)容，就是在app登錄后主頁下面的一欄按鈕，這些tabbar基本上包括了app的主要內(nèi)容，如何實(shí)現(xiàn)動態(tài)的tabbar，像上面提到的根據(jù)權(quán)限控制。比如說tabbar最多只能有五個(gè)，那我如何控制甲能看到5個(gè)，乙只能看到3個(gè)？這個(gè)需求在原生的uniapp上無法實(shí)現(xiàn)，原生的只能配置好pages，tabBar是pages的一個(gè)子項(xiàng)配置。不過插件市場上有人實(shí)現(xiàn)了tabbar的組件化，我們可以嘗試下定制開發(fā)。

總結(jié)起來說需求其實(shí)就兩個(gè)：

1、實(shí)現(xiàn)uniapp路由守衛(wèi)；

2、實(shí)現(xiàn)動態(tài)tabbar；

第一個(gè)需求，前面提到過一些方案；第二個(gè)需求，動態(tài)tabbar，需要結(jié)合uview組件庫的tabbar組件來實(shí)現(xiàn)。我們再分析下目前的框架、插件能力，糅合上述需求，就有這張圖：

這張圖里有些內(nèi)容前面沒有提到，比如狀態(tài)管理、本地緩存，這是后面會用到的一個(gè)關(guān)鍵部分，下面的設(shè)計(jì)部分會提到。

方案設(shè)計(jì)

我們來捋一捋業(yè)務(wù)流程設(shè)計(jì)：

1、app輸入用戶名密碼登錄；

2、在路由守衛(wèi)進(jìn)行攔截，判斷用戶登錄時(shí)的本地?cái)?shù)據(jù)是否存在路由信息；如果沒有則走第3步，如果有就走第4步；

3、調(diào)用接口獲取到路由并從服務(wù)端獲取路由數(shù)據(jù)；將路由數(shù)據(jù)存入本地（vuex、uniapp緩存）；

4、將tabbar這一層級數(shù)據(jù)單獨(dú)提出來存儲，結(jié)合uview的tabbar組件實(shí)現(xiàn)動態(tài)tabbar;

5、在本地存一個(gè)全量的app按鈕集合(除了tabbar，其他頁面都是通過按鈕跳轉(zhuǎn))，與服務(wù)端獲取的數(shù)據(jù)進(jìn)行比對，得到一個(gè)按鈕展示與否的配置數(shù)據(jù)集；

6、路由信息初始化后，進(jìn)入用戶定制化的初始頁或者首頁；

ok，分析得差不多了，下面介紹下具體實(shí)操步驟。

解決方案

一、實(shí)現(xiàn)路由守衛(wèi)

路由插件推薦uni-simple-router，具體教程可以參考它的官方文檔，寫得比較詳細(xì)了。以下是我的簡單實(shí)戰(zhàn)教程。

安裝uni-simple-router插件

npm install uni-simple-router

接下來進(jìn)行模塊化配置，創(chuàng)建文件夾router，文件夾內(nèi)容如下：

home文件里是所有頁面的路由配置，就像這樣：

const home = [  {       path: '/pages/login/login',       aliasPath:'/app/login',  //對于h5端適用       name: 'login',         meta: {          title: '登錄',      }     },  {       path: '/pages/index/index',       aliasPath:'/app/index',  //對于h5端適用       name: 'index',         meta: {          title: '首頁',      }     }] export default home

這里必須要多說一句，由于這個(gè)插件沒有動態(tài)寫入功能，所以我們要實(shí)現(xiàn)權(quán)限管理，必須在本地配置完整的路由；而且pages.json中的內(nèi)容也要完整配置，不過tabbar配置有些不同，后面會說到；

modules文件夾下的index只是一個(gè)模塊讀取的代碼；

const files = require.context('.', false, /.js$/) const modules = []  files.keys().forEach(key => {   if (key === './index.js') return   const item = files(key).default   modules.push(...item) })  export default modules

router根級目錄下的index內(nèi)容主要就是路由守衛(wèi)：

import modules from './modules/index.js' import Vue from 'vue' import Router from 'uni-simple-router' import store from '@/store/store.js'  Vue.use(Router) //初始化 const router = new Router({  APP: {   holdTabbar: false //默認(rèn)true  },  h5: {   vueRouterDev: true, //完全使用vue-router開發(fā) 默認(rèn) false    },  routes: [...modules] //路由表 });  //全局路由前置守衛(wèi) router.beforeEach((to, from, next) => {  // 首先判斷是否存在路由信息  //不存在就先調(diào)用接口得到數(shù)據(jù)    //具體內(nèi)容可以參照上文的方案設(shè)計(jì)內(nèi)容 }) // 全局路由后置守衛(wèi) router.afterEach((to, from) => {}) export default router;

最后在app的main.js里需要這么引用：

import router from './router/index.js' import { RouterMount } from 'uni-simple-router' ...  //v1.3.5起 H5端 你應(yīng)該去除原有的app.$mount();使用路由自帶的渲染方式 // #ifdef H5  RouterMount(app,'#app'); // #endif  //為了兼容小程序及app端必須這樣寫才有效果 // #ifndef H5  app.$mount();  // #endif

至于后面的路由用法，直接看官方文檔，比較清楚，用法跟vue-router差不多。這里要特別說明的是上面代碼初始化的那一塊的幾個(gè)配置：holdTabbar: false，vueRouterDev: true,前者表示在app端取代原生的tabbar攔截，在這個(gè)插件里攔截；后者表示在h5中完全用vue-router的api，廢棄了包括此插件及uniapp的原生api，后者請慎用。

二、結(jié)合狀態(tài)管理、uniapp數(shù)據(jù)緩存管理app緩存開銷

這里其實(shí)沒什么難度，也不給代碼了，很簡單。

從服務(wù)端獲取的數(shù)據(jù)我可以存在狀態(tài)管理里，但是vuex的數(shù)據(jù)存在內(nèi)存中，容易丟失。比如說，app用一會兒，我拉到了后臺，立馬再點(diǎn)開是沒問題可以用的；但如果時(shí)間太長了，不小心清了緩存，或者超過了服務(wù)端的超時(shí)限制，此時(shí)再次點(diǎn)開app，可能就缺失了部分?jǐn)?shù)據(jù)。這個(gè)問題就要在路由守衛(wèi)進(jìn)行處理了，在路由跳轉(zhuǎn)時(shí)就判斷相關(guān)的狀態(tài)數(shù)據(jù)是否存在，不存在就再進(jìn)行處理。

再介紹一下uniapp的數(shù)據(jù)緩存api，更穩(wěn)定，特別在app上，它不是緩存的概念，是持久化存在的，除非你調(diào)用它的清除方法。你可以利用這二者，分別存一些數(shù)據(jù)，搭配做一些控制，具體實(shí)現(xiàn)就自己琢磨下。比如你從后臺拉回，狀態(tài)管理的數(shù)據(jù)沒了，但這個(gè)時(shí)間還在服務(wù)端超時(shí)范圍內(nèi)，那這個(gè)未超時(shí)的token數(shù)據(jù)就要存在uniapp的數(shù)據(jù)緩存中，我根據(jù)這個(gè)token再查到相關(guān)權(quán)限路由信息，給vuex賦值，再進(jìn)行后續(xù)操作；如果拉回來，超時(shí)了，那就直接回到登錄頁。這一塊，我只是提供思路，而且是成功的思路，親測有效的。

三、實(shí)現(xiàn)動態(tài)tabbar

好了，能走到這一步，萬里長征就走了一半了。別看下面的內(nèi)容就那么一點(diǎn)，我把相關(guān)的資料拼起來實(shí)際上花了比上面那些