Vue動態(tài)路由(支持嵌套路由)和動態(tài)菜單UI開發(fā)框架
前言:
在前一篇文章中，我們說了怎樣開發(fā)動態(tài)路由和動態(tài)菜單，但是之前的項目缺乏對嵌套路由的一個支持。
嵌套路由是路由中提供了一個非常主要的路由方法，可以更好地表達層級關(guān)系和輔助的組件，我們可以快速的在一個組件當中開發(fā)很多的功能部分。這樣我們便可實現(xiàn)主路由不跳轉(zhuǎn)，而實現(xiàn)局部的一個變化，這是非常有用的。
使用示例：
什么是嵌套路由:
嵌套路由vue-router官網(wǎng)上有詳細的介紹。在我個人的理解來說，他就是在主路由上通過“
和之前分享的差異
之前我也發(fā)過一個動態(tài)路由和動態(tài)菜單相互綁定的一個開發(fā)框架，但之前的UI框架只能生成一些傳統(tǒng)的路由和菜單，不支持嵌套路由的生成，這次嵌套路由生成的優(yōu)化，可以為整個網(wǎng)站提供嵌套路由的一個配置和管理，這樣子我們便可更快的完成組件功能的開發(fā)。實現(xiàn)嵌套路由與動態(tài)菜單功能的優(yōu)化使該vue開發(fā)框架更加具有實用性，防止因為框架不支持嵌套路由帶來的一些阻礙影響了大家的開發(fā)。
其次，我們也集成了一些常用的庫，方便大家快速的進行開發(fā)和引用，但我們?yōu)榱朔奖愀髯缘囊粋€開發(fā)情況，那么我們在進行開發(fā)適配的過程中，我們只集成JavaScript庫，并沒有對項目進行任何其他的優(yōu)化和調(diào)整，因為每個人的需要是不一樣的，每個項目的需要也是不一樣的，我們盡可能不干擾你的正常項目開發(fā)。
你只需要創(chuàng)建自己的組件，進行掛載，綁定菜單即可。
集成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
前期準備:
一、我們在s rc文件下新建一個unitui文件夾，下面新建pages(防止公共頁面)、sub(公共組件)、ui(菜單組件)三個文件夾。
然后我們再配置一些常用的公共頁面(不需要權(quán)限)頁面如登錄、找回密碼、注冊和404錯誤頁。
其次，我們在ui文件夾下寫入一些菜單區(qū)域內(nèi)容，如左側(cè)菜單、頂部菜單、底部菜單，那么我們的前期準備第一步已經(jīng)完成
二、我們在靜態(tài)assets\ json文件夾下面創(chuàng)建menu.json和route.json，這兩個json文件是為模擬登錄后，后端返回的路由和菜單json數(shù)據(jù)。我們可以依據(jù)這個json文件去生成路由和菜單信息，其中菜單信息可以直接用sessionStorage儲存，路由信息需要持續(xù)生成·。
三、我們需要創(chuàng)建一個組件，用為管理路由(路由json信息管理和文件綁定)和菜單(生成和路由path綁定)。我們可以通過該組件可以快速管理路由文件位置和路由的一些相關(guān)信息，如網(wǎng)站標題、訪問路徑、路由名稱、是否顯示在框架內(nèi)。
其次我們也要對菜單進行一個管理，我們對菜單的新增、刪除、修改和訪問地址進行一個是動態(tài)的設(shè)置，這樣子我們便可實現(xiàn)一個動態(tài)管理組件。這樣我們的前期準備就已經(jīng)基本完成(該組件已經(jīng)內(nèi)置)。
內(nèi)置管理組件:
實現(xiàn)原理：
示例：
添加路由：
添加子路由：
菜單部分：
添加一級菜單：
添加二級菜單
二級菜單路由選擇：
防止刷新組件丟失:
在我們基本配置之后，會發(fā)現(xiàn)我們正常的路由切換是沒有任何問題，但是我們產(chǎn)生刷新行為之后。我們的數(shù)據(jù)就會進行一個丟失，特別是添加路由的一個數(shù)據(jù)會進行丟失，那么此時我們路由跳轉(zhuǎn)就會產(chǎn)生一個路由跳轉(zhuǎn)失敗，為了防止因為跳轉(zhuǎn)失誤帶來的體驗問題，我們會在App.vue文件下的mounted中執(zhí)行路由的初始函數(shù)對之前通過sessionStorage儲存的路由信息進行路由添加防止跳轉(zhuǎn)失敗，你也可以在這里判斷用戶是否登錄等。
