[[416742]]

前言:

在前一篇文章中，我們說了怎樣開發(fā)動(dòng)態(tài)路由和動(dòng)態(tài)菜單，但是之前的項(xiàng)目缺乏對(duì)嵌套路由的一個(gè)支持。

嵌套路由是路由中提供了一個(gè)非常主要的路由方法，可以更好地表達(dá)層級(jí)關(guān)系和輔助的組件，我們可以快速的在一個(gè)組件當(dāng)中開發(fā)很多的功能部分。這樣我們便可實(shí)現(xiàn)主路由不跳轉(zhuǎn)，而實(shí)現(xiàn)局部的一個(gè)變化，這是非常有用的。

使用示例：

什么是嵌套路由:

嵌套路由vue-router官網(wǎng)上有詳細(xì)的介紹。在我個(gè)人的理解來說，他就是在主路由上通過“”確定一個(gè)顯示區(qū)域，這樣子我們通過訪問主路由下面的子路由，我們便可將子路由的內(nèi)容顯示在之前綁定所要顯示的區(qū)域之內(nèi)，這樣有利于我們開發(fā)組件的功能開發(fā)，比如說我們?cè)谶M(jìn)行一個(gè)用戶管理組件開發(fā)時(shí)，我們可以可以通過嵌套路由的形式快速實(shí)現(xiàn)用戶管理、用戶信息回復(fù)、用戶修改、用戶添加等功能模塊的開發(fā)。我們便可實(shí)現(xiàn)功能區(qū)域快速的切換，減少了自己的邏輯的一個(gè)換算，這是對(duì)于我們來說是非常有用的，特別是一些復(fù)雜的界面。

和之前分享的差異

之前我也發(fā)過一個(gè)動(dòng)態(tài)路由和動(dòng)態(tài)菜單相互綁定的一個(gè)開發(fā)框架，但之前的UI框架只能生成一些傳統(tǒng)的路由和菜單，不支持嵌套路由的生成，這次嵌套路由生成的優(yōu)化，可以為整個(gè)網(wǎng)站提供嵌套路由的一個(gè)配置和管理，這樣子我們便可更快的完成組件功能的開發(fā)。實(shí)現(xiàn)嵌套路由與動(dòng)態(tài)菜單功能的優(yōu)化使該vue開發(fā)框架更加具有實(shí)用性，防止因?yàn)榭蚣懿恢С智短茁酚蓭淼囊恍┳璧K影響了大家的開發(fā)。

其次，我們也集成了一些常用的庫，方便大家快速的進(jìn)行開發(fā)和引用，但我們?yōu)榱朔奖愀髯缘囊粋€(gè)開發(fā)情況，那么我們?cè)谶M(jìn)行開發(fā)適配的過程中，我們只集成JavaScript庫，并沒有對(duì)項(xiàng)目進(jìn)行任何其他的優(yōu)化和調(diào)整，因?yàn)槊總€(gè)人的需要是不一樣的，每個(gè)項(xiàng)目的需要也是不一樣的，我們盡可能不干擾你的正常項(xiàng)目開發(fā)。

你只需要?jiǎng)?chuàng)建自己的組件，進(jìn)行掛載，綁定菜單即可。

集成js庫:

axios:v0.21.1

core-js:v3.6.5

echarts:v5.1.2

element-ui:v2.15.5

vue:v2.6.11

vue-router:v3.2.0

前期準(zhǔn)備:

一、我們?cè)趕 rc文件下新建一個(gè)unitui文件夾，下面新建pages(防止公共頁面)、sub(公共組件)、ui(菜單組件)三個(gè)文件夾。

然后我們?cè)倥渲靡恍┏Ｓ玫墓岔撁?不需要權(quán)限)頁面如登錄、找回密碼、注冊(cè)和404錯(cuò)誤頁。

其次，我們?cè)趗i文件夾下寫入一些菜單區(qū)域內(nèi)容，如左側(cè)菜單、頂部菜單、底部菜單，那么我們的前期準(zhǔn)備第一步已經(jīng)完成

二、我們?cè)陟o態(tài)assets\ json文件夾下面創(chuàng)建menu.json和route.json，這兩個(gè)json文件是為模擬登錄后，后端返回的路由和菜單json數(shù)據(jù)。我們可以依據(jù)這個(gè)json文件去生成路由和菜單信息，其中菜單信息可以直接用sessionStorage儲(chǔ)存，路由信息需要持續(xù)生成·。

三、我們需要?jiǎng)?chuàng)建一個(gè)組件，用為管理路由(路由json信息管理和文件綁定)和菜單(生成和路由path綁定)。我們可以通過該組件可以快速管理路由文件位置和路由的一些相關(guān)信息，如網(wǎng)站標(biāo)題、訪問路徑、路由名稱、是否顯示在框架內(nèi)。

其次我們也要對(duì)菜單進(jìn)行一個(gè)管理，我們對(duì)菜單的新增、刪除、修改和訪問地址進(jìn)行一個(gè)是動(dòng)態(tài)的設(shè)置，這樣子我們便可實(shí)現(xiàn)一個(gè)動(dòng)態(tài)管理組件。這樣我們的前期準(zhǔn)備就已經(jīng)基本完成(該組件已經(jīng)內(nèi)置)。

內(nèi)置管理組件:

實(shí)現(xiàn)原理：

 示例：

 添加路由：

 添加子路由：

 菜單部分：

 添加一級(jí)菜單：

 添加二級(jí)菜單

 二級(jí)菜單路由選擇：

 防止刷新組件丟失:

在我們基本配置之后，會(huì)發(fā)現(xiàn)我們正常的路由切換是沒有任何問題，但是我們產(chǎn)生刷新行為之后。我們的數(shù)據(jù)就會(huì)進(jìn)行一個(gè)丟失，特別是添加路由的一個(gè)數(shù)據(jù)會(huì)進(jìn)行丟失，那么此時(shí)我們路由跳轉(zhuǎn)就會(huì)產(chǎn)生一個(gè)路由跳轉(zhuǎn)失敗，為了防止因?yàn)樘D(zhuǎn)失誤帶來的體驗(yàn)問題，我們會(huì)在App.vue文件下的mounted中執(zhí)行路由的初始函數(shù)對(duì)之前通過sessionStorage儲(chǔ)存的路由信息進(jìn)行路由添加防止跳轉(zhuǎn)失敗，你也可以在這里判斷用戶是否登錄等。