[[416088]]

前言

以往我們在開發(fā)vue項(xiàng)目的時(shí)候，總是通過將路徑和路由寫在route/index.js文件中，然后直接進(jìn)行訪問即可，一般實(shí)現(xiàn)權(quán)限匹配都是通過菜單下面的權(quán)限參數(shù)和路由守衛(wèi)進(jìn)行一個(gè)驗(yàn)證攔截和權(quán)限匹配，然而這樣安全性仍然不足。因?yàn)槲覀冊趓oute/index.js中已經(jīng)寫滿了所有的路由，這樣子不僅造成靜態(tài)路由內(nèi)容過多、修改困難，同時(shí)當(dāng)靜態(tài)路由內(nèi)容過多的時(shí)候，我們在路由中的內(nèi)容就顯得極其復(fù)雜。

而后端對前端的控制也顯得較為無力，無法實(shí)現(xiàn)嚴(yán)格性的控制。

由此我們發(fā)現(xiàn)通過動(dòng)態(tài)路由控制是必然的，此時(shí)我們只需要通過后端獲取數(shù)據(jù)菜單和路由信息json，然后動(dòng)態(tài)添加路由并生成菜單，使菜單與動(dòng)態(tài)路由內(nèi)容進(jìn)行一個(gè)匹配，這樣子我們可以實(shí)現(xiàn)由后端控制前端的菜單和路由，我們的項(xiàng)目往往只需要內(nèi)置幾個(gè)組件無需權(quán)限的公共頁面如登陸、注冊、忘記密碼和404錯(cuò)誤這幾個(gè)常用頁面組件。

動(dòng)態(tài)路由和動(dòng)態(tài)菜單項(xiàng)目的好處

第一我們可以將我們的任意組件做成一個(gè)插件的形式。

我們只需要將寫好的組件放置到我們的view視圖下，然后我們通過動(dòng)態(tài)的路由和菜單實(shí)現(xiàn)路由添加和菜單進(jìn)行匹配，我們便可實(shí)現(xiàn)對插件進(jìn)行訪問，我們減少了對route/index.js內(nèi)容寫入，同時(shí)也有利于減少內(nèi)存的占用。

第二這樣有利于保證安全。

我們通過動(dòng)態(tài)路由的形式，我們生成的菜單權(quán)限更加的完善，不僅實(shí)現(xiàn)依靠菜單與路由守衛(wèi)攔截實(shí)現(xiàn)鑒權(quán)，也可以通過動(dòng)態(tài)路由實(shí)現(xiàn)動(dòng)態(tài)加載vue文件，控制更加深度

第三、我們可以實(shí)現(xiàn)團(tuán)隊(duì)的開發(fā)。

我們通過動(dòng)態(tài)路由的形式，我們可以將項(xiàng)目分給不同的人進(jìn)行完成，便于組建一個(gè)開發(fā)團(tuán)隊(duì)，因?yàn)樗麄兯_發(fā)的組件，我們只需要在具備基本的javascript庫的情況下。我們直接進(jìn)行動(dòng)態(tài)路由的一個(gè)掛載和菜單生成便可完成項(xiàng)目合作，減少了對route/index.js文件的操作，保證項(xiàng)目的完整性。

最后我發(fā)現(xiàn)在非node環(huán)境的開發(fā)條件下，我們可以實(shí)現(xiàn)遠(yuǎn)程的vue文件加載，這不僅為我們開發(fā)提供了便利，同時(shí)也有利于我們及時(shí)修改文件，以達(dá)到項(xiàng)目的需求，更有利于保障安全，實(shí)現(xiàn)服務(wù)器vue文件加載。

開發(fā)環(huán)境配置信息

Vue：2.6.11。

Vue-route：3.2.0。

部分示例組件

主頁

聊天

動(dòng)態(tài)路由和動(dòng)態(tài)菜單項(xiàng)目的實(shí)現(xiàn)原理

第一通過后端返回的一個(gè)路由json數(shù)據(jù)，我們通過前端生成符合路由路由靜態(tài)內(nèi)容數(shù)組的一個(gè)數(shù)組，然后再通過addRoute進(jìn)行一個(gè)循環(huán)添加，我們以此生成動(dòng)態(tài)路由。在登陸時(shí)獲取后端返回的菜單信息，我們進(jìn)行菜單的一個(gè)循環(huán)生成，由此我們的一個(gè)動(dòng)態(tài)項(xiàng)目就已經(jīng)完成。

第二怎樣對動(dòng)態(tài)路由和菜單項(xiàng)目進(jìn)行一個(gè)管理。

我們首先可以通過搭建一個(gè)組件通過添加路由信息和管理菜單實(shí)現(xiàn)二者的動(dòng)態(tài)匹配。我們只需要對路由信息進(jìn)行一個(gè)添加和修改，并和菜單相互間進(jìn)行匹配，我們便可實(shí)現(xiàn)簡單的路由掛載。

組件管理

菜單管理

此時(shí)將數(shù)據(jù)提交的后端由后端進(jìn)行數(shù)據(jù)保存，我們此時(shí)的組件只需要放在views文件夾下，添加路由進(jìn)行文件加載，我們便可實(shí)現(xiàn)路由管理。

示例部分

第一登陸頁面配置。

我們需要在靜態(tài)文件夾下創(chuàng)建一個(gè)menu.json和route.json。兩個(gè)json文件模擬服務(wù)器登錄時(shí)返回的數(shù)據(jù)。

我們在登錄頁面模擬獲取數(shù)據(jù)之后，我們通過菜單的一個(gè)方法進(jìn)行生成菜單，通過路由的方法生成路由數(shù)組并進(jìn)行循環(huán)添加，然后執(zhí)行路由跳轉(zhuǎn)。

第二配置路由初始化內(nèi)容。我們將route/index.js的路由信息填為空是非常不理智的，而且會(huì)報(bào)錯(cuò)，因?yàn)槁酚沙跏蓟诩虞d前已經(jīng)完成。有些頁面完全不需要權(quán)限便可訪問，比如登錄、注冊、找回密碼和404錯(cuò)誤，這種不需要權(quán)限的頁面，我們還是需要將其直接以靜態(tài)的形式寫在route/index.js文件中。

Index初始數(shù)據(jù)

import Vue from 'vue' 
 
import VueRouter from 'vue-router' 
 
Vue.use(VueRouter) 
 
const routes = [{ 
 
path: '/', //訪問url 
 
name: 'login', //路由名稱 
 
component: () => import('@/unitui/pages/Login.vue'), //加載模板文件 
 
meta: { 
 
show_site: 0, //是否全屏顯示 
 
web_title: "登錄" //網(wǎng)站標(biāo)題 
 
} 
 
}, 
 
{ 
 
path: '/register', //訪問url 
 
name: 'register', //路由名稱 
 
component: () => import('@/unitui/pages/Register.vue'), //加載模板文件 
 
meta: { 
 
show_site: 0, //是否全屏顯示 
 
web_title: "注冊" //網(wǎng)站標(biāo)題 
 
} 
 
}, 
 
{ 
 
path: '/forget', //訪問url 
 
name: 'forget', //路由名稱 
 
component: () => import('@/unitui/pages/Forget.vue'), //加載模板文件 
 
meta: { 
 
show_site: 0, //是否全屏顯示 
 
web_title: "找回密碼" //網(wǎng)站標(biāo)題 
 
} 
 
}, 
 
{ 
 
path: '/404', //訪問url 
 
name: '404', //路由名稱 
 
component: () => import('@/unitui/pages/404.vue'), //加載模板文件 
 
meta: { 
 
show_site: 0, //是否全屏顯示 
 
web_title: "404錯(cuò)誤" //網(wǎng)站標(biāo)題 
 
} 
 
}, 
 
] 
 
const router = new VueRouter({ 
 
routes 
 
}) 
 
router.beforeEach((to, from, next) => { 
 
document.title = to.meta.web_title 
 
console.log(to); 
 
next() 
 
}) 
 
export default router 

第三，關(guān)于防止刷新后丟失的問題。我們需要在app.vue文件中的methods方法中定義一個(gè)路由生成方法。

示例：

init_route() {//初始化路由，防止刷新丟失 
 
if (sessionStorage.getItem("route_data") != null) {//只有后端已經(jīng)返回?cái)?shù)據(jù)的情況下才允許生成 
 
const route_data = JSON.parse(sessionStorage.getItem("route_data"));//獲取路由信息 
 
const data = [];//默認(rèn)路由數(shù)組 
 
for (let index = 0; index < route_data.length; index++) {//生成路由信息 
 
data[index] = { 
 
path: route_data[index].path, //訪問url 
 
name: route_data[index].name, //路由名稱 
 
component: resolve => 
 
require([`@/views/${route_data[index].component}`], resolve), //加載模板文件 
 
meta: { 
 
show_site: route_data[index].meta.show_site, //是否全屏顯示 
 
web_title: route_data[index].meta.web_title //網(wǎng)站標(biāo)題 
 
} 
 
}; 
 
} 
 
for (let index = 0; index < data.length; index++) {//循環(huán)添加路由 
 
this.$router.addRoute(data[index]); 
 
} 
 
} 
 
} 

在mounted中進(jìn)行方法調(diào)用，防止刷新的時(shí)路由丟失，導(dǎo)致發(fā)生錯(cuò)誤。該方法內(nèi)容基本和登陸頁面的菜單出路由初始內(nèi)容基本相同，但我們唯一差別的是，我們需要判斷登陸所獲取的路由信息是否存在，只有在存在的時(shí)候及后端已經(jīng)返回了路由信息，即證明登錄成功的時(shí)候，我們才會(huì)動(dòng)態(tài)添加路由。

常見的錯(cuò)誤

第一在刷新之后，默認(rèn)跳轉(zhuǎn)到path:’*’的一個(gè)路由界面中去，此時(shí)我們解決方法只需要將path:’*’路由進(jìn)行一個(gè)刪除,將其刪除就變可正常訪問。

第二動(dòng)態(tài)路由跳轉(zhuǎn)時(shí)發(fā)生Cannot find module xxx錯(cuò)誤。

意思是無法加載我們指定的一個(gè)vue文件，這是由于route3.0版本后import方式不支持傳入變量，此時(shí)我們只需要將其改為require方式便可。

我們此次動(dòng)態(tài)vue項(xiàng)目開發(fā)已經(jīng)基本完成，我的開發(fā)的項(xiàng)目是基于element-ui進(jìn)行，那么如果你需要源碼參考?？梢运叫呕貜?fù)unit便可獲取。