[[416742]]

前言:

在前一篇文章中，我們說了怎樣開發動態路由和動態菜單，但是之前的項目缺乏對嵌套路由的一個支持。

嵌套路由是路由中提供了一個非常主要的路由方法，可以更好地表達層級關系和輔助的組件，我們可以快速的在一個組件當中開發很多的功能部分。這樣我們便可實現主路由不跳轉，而實現局部的一個變化，這是非常有用的。

使用示例：

什么是嵌套路由:

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

和之前分享的差異

之前我也發過一個動態路由和動態菜單相互綁定的一個開發框架，但之前的UI框架只能生成一些傳統的路由和菜單，不支持嵌套路由的生成，這次嵌套路由生成的優化，可以為整個網站提供嵌套路由的一個配置和管理，這樣子我們便可更快的完成組件功能的開發。實現嵌套路由與動態菜單功能的優化使該vue開發框架更加具有實用性，防止因為框架不支持嵌套路由帶來的一些阻礙影響了大家的開發。

其次，我們也集成了一些常用的庫，方便大家快速的進行開發和引用，但我們為了方便各自的一個開發情況，那么我們在進行開發適配的過程中，我們只集成JavaScript庫，并沒有對項目進行任何其他的優化和調整，因為每個人的需要是不一樣的，每個項目的需要也是不一樣的，我們盡可能不干擾你的正常項目開發。

你只需要創建自己的組件，進行掛載，綁定菜單即可。

集成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(菜單組件)三個文件夾。

然后我們再配置一些常用的公共頁面(不需要權限)頁面如登錄、找回密碼、注冊和404錯誤頁。

其次，我們在ui文件夾下寫入一些菜單區域內容，如左側菜單、頂部菜單、底部菜單，那么我們的前期準備第一步已經完成

二、我們在靜態assets\ json文件夾下面創建menu.json和route.json，這兩個json文件是為模擬登錄后，后端返回的路由和菜單json數據。我們可以依據這個json文件去生成路由和菜單信息，其中菜單信息可以直接用sessionStorage儲存，路由信息需要持續生成·。

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

其次我們也要對菜單進行一個管理，我們對菜單的新增、刪除、修改和訪問地址進行一個是動態的設置，這樣子我們便可實現一個動態管理組件。這樣我們的前期準備就已經基本完成(該組件已經內置)。

內置管理組件:

實現原理：

 示例：

 添加路由：

 添加子路由：

 菜單部分：

 添加一級菜單：

 添加二級菜單

 二級菜單路由選擇：

 防止刷新組件丟失:

在我們基本配置之后，會發現我們正常的路由切換是沒有任何問題，但是我們產生刷新行為之后。我們的數據就會進行一個丟失，特別是添加路由的一個數據會進行丟失，那么此時我們路由跳轉就會產生一個路由跳轉失敗，為了防止因為跳轉失誤帶來的體驗問題，我們會在App.vue文件下的mounted中執行路由的初始函數對之前通過sessionStorage儲存的路由信息進行路由添加防止跳轉失敗，你也可以在這里判斷用戶是否登錄等。