JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-04-06 03:58:00 +08:00
Code Issues Projects Releases Wiki Activity

🔥🔥🔥完善路由后端渲染方案，弃用之前写法

Browse Source
This commit is contained in:
chuzhixin 2020-09-30 17:37:36 +08:00
parent dc02bb01cd
commit 05d1d9dc1a
3 changed files with 55 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
mock/controller/router.js
View File

@ -7,7 +7,7 @@ const data = [
{ {
path: "index", path: "index",
name: "Index", name: "Index",
component: "views/index/index", component: "@/views/index/index",
meta: { meta: {
title: "首页", title: "首页",
icon: "home", icon: "home",
@ -25,7 +25,7 @@ const data = [
{ {
path: "personalCenter", path: "personalCenter",
name: "PersonalCenter", name: "PersonalCenter",
component: "views/personalCenter/index", component: "@/views/personalCenter/index",
meta: { meta: {
title: "个人中心", title: "个人中心",
}, },
@ -42,19 +42,19 @@ const data = [
{ {
path: "userManagement", path: "userManagement",
name: "UserManagement", name: "UserManagement",
component: "views/personnelManagement/userManagement/index", component: "@/views/personnelManagement/userManagement/index",
meta: { title: "用户管理" }, meta: { title: "用户管理" },
}, },
{ {
path: "roleManagement", path: "roleManagement",
name: "RoleManagement", name: "RoleManagement",
component: "views/personnelManagement/roleManagement/index", component: "@/views/personnelManagement/roleManagement/index",
meta: { title: "角色管理" }, meta: { title: "角色管理" },
}, },
{ {
path: "menuManagement", path: "menuManagement",
name: "MenuManagement", name: "MenuManagement",
component: "views/personnelManagement/menuManagement/index", component: "@/views/personnelManagement/menuManagement/index",
meta: { title: "菜单管理", badge: "New" }, meta: { title: "菜单管理", badge: "New" },
}, },
], ],
@ -70,7 +70,7 @@ const data = [
{ {
path: "permissions", path: "permissions",
name: "Permission", name: "Permission",
component: "views/vab/permissions/index", component: "@/views/vab/permissions/index",
meta: { meta: {
title: "权限控制", title: "权限控制",
permissions: ["admin", "editor"], permissions: ["admin", "editor"],
@ -90,19 +90,19 @@ const data = [
{ {
path: "awesomeIcon", path: "awesomeIcon",
name: "AwesomeIcon", name: "AwesomeIcon",
component: "views/vab/icon/index", component: "@/views/vab/icon/index",
meta: { title: "常规图标" }, meta: { title: "常规图标" },
}, },
{ {
path: "remixIcon", path: "remixIcon",
name: "RemixIcon", name: "RemixIcon",
component: "views/vab/icon/remixIcon", component: "@/views/vab/icon/remixIcon",
meta: { title: "小清新图标" }, meta: { title: "小清新图标" },
}, },
{ {
path: "colorfulIcon", path: "colorfulIcon",
name: "ColorfulIcon", name: "ColorfulIcon",
component: "views/vab/icon/colorfulIcon", component: "@/views/vab/icon/colorfulIcon",
meta: { title: "多彩图标" }, meta: { title: "多彩图标" },
}, },
], ],
@ -120,13 +120,13 @@ const data = [
{ {
path: "comprehensiveTable", path: "comprehensiveTable",
name: "ComprehensiveTable", name: "ComprehensiveTable",
component: "views/vab/table/index", component: "@/views/vab/table/index",
meta: { title: "综合表格" }, meta: { title: "综合表格" },
}, },
{ {
path: "inlineEditTable", path: "inlineEditTable",
name: "InlineEditTable", name: "InlineEditTable",
component: "views/vab/table/inlineEditTable", component: "@/views/vab/table/inlineEditTable",
meta: { title: "行内编辑" }, meta: { title: "行内编辑" },
}, },
], ],
@ -134,44 +134,44 @@ const data = [
{ {
path: "map", path: "map",
name: "Map", name: "Map",
component: "views/vab/map/index", component: "@/views/vab/map/index",
meta: { title: "地图", permissions: ["admin"], badge: "Pro" }, meta: { title: "地图", permissions: ["admin"], badge: "Pro" },
}, },
{ {
path: "webSocket", path: "webSocket",
name: "WebSocket", name: "WebSocket",
component: "views/vab/webSocket/index", component: "@/views/vab/webSocket/index",
meta: { title: "webSocket", permissions: ["admin"] }, meta: { title: "webSocket", permissions: ["admin"] },
}, },
{ {
path: "form", path: "form",
name: "Form", name: "Form",
component: "views/vab/form/index", component: "@/views/vab/form/index",
meta: { title: "表单", permissions: ["admin"] }, meta: { title: "表单", permissions: ["admin"] },
}, },
{ {
path: "element", path: "element",
name: "Element", name: "Element",
component: "views/vab/element/index", component: "@/views/vab/element/index",
meta: { title: "常用组件", permissions: ["admin"] }, meta: { title: "常用组件", permissions: ["admin"] },
}, },
{ {
path: "tree", path: "tree",
name: "Tree", name: "Tree",
component: "views/vab/tree/index", component: "@/views/vab/tree/index",
meta: { title: "树", permissions: ["admin"] }, meta: { title: "树", permissions: ["admin"] },
}, },
{ {
path: "card", path: "card",
name: "Card", name: "Card",
component: "views/vab/card/index", component: "@/views/vab/card/index",
meta: { title: "卡片", permissions: ["admin"] }, meta: { title: "卡片", permissions: ["admin"] },
}, },
{ {
path: "betterScroll", path: "betterScroll",
name: "BetterScroll", name: "BetterScroll",
component: "views/vab/betterScroll/index", component: "@/views/vab/betterScroll/index",
meta: { meta: {
title: "滚动侦测", title: "滚动侦测",
permissions: ["admin"], permissions: ["admin"],
@ -180,12 +180,12 @@ const data = [
{ {
path: "verify", path: "verify",
name: "Verify", name: "Verify",
component: "views/vab/verify/index", component: "@/views/vab/verify/index",
meta: { title: "验证码", permissions: ["admin"] }, meta: { title: "验证码", permissions: ["admin"] },
}, },
{ {
path: "menu1", path: "menu1",
component: "views/vab/nested/menu1/index", component: "@/views/vab/nested/menu1/index",
name: "Menu1", name: "Menu1",
alwaysShow: true, alwaysShow: true,
meta: { meta: {
@ -198,14 +198,14 @@ const data = [
name: "Menu1-1", name: "Menu1-1",
alwaysShow: true, alwaysShow: true,
meta: { title: "嵌套路由 1-1" }, meta: { title: "嵌套路由 1-1" },
component: "views/vab/nested/menu1/menu1-1/index", component: "@/views/vab/nested/menu1/menu1-1/index",
children: [ children: [
{ {
path: "menu1-1-1", path: "menu1-1-1",
name: "Menu1-1-1", name: "Menu1-1-1",
meta: { title: "嵌套路由 1-1-1" }, meta: { title: "嵌套路由 1-1-1" },
component: "views/vab/nested/menu1/menu1-1/menu1-1-1/index", component: "@/views/vab/nested/menu1/menu1-1/menu1-1-1/index",
}, },
], ],
}, },
@ -214,105 +214,105 @@ const data = [
{ {
path: "magnifier", path: "magnifier",
name: "Magnifier", name: "Magnifier",
component: "views/vab/magnifier/index", component: "@/views/vab/magnifier/index",
meta: { title: "放大镜", permissions: ["admin"] }, meta: { title: "放大镜", permissions: ["admin"] },
}, },
{ {
path: "echarts", path: "echarts",
name: "Echarts", name: "Echarts",
component: "views/vab/echarts/index", component: "@/views/vab/echarts/index",
meta: { title: "图表", permissions: ["admin"] }, meta: { title: "图表", permissions: ["admin"] },
}, },
{ {
path: "loading", path: "loading",
name: "Loading", name: "Loading",
component: "views/vab/loading/index", component: "@/views/vab/loading/index",
meta: { title: "loading", permissions: ["admin"] }, meta: { title: "loading", permissions: ["admin"] },
}, },
{ {
path: "player", path: "player",
name: "Player", name: "Player",
component: "views/vab/player/index", component: "@/views/vab/player/index",
meta: { title: "视频播放器", permissions: ["admin"] }, meta: { title: "视频播放器", permissions: ["admin"] },
}, },
{ {
path: "markdownEditor", path: "markdownEditor",
name: "MarkdownEditor", name: "MarkdownEditor",
component: "views/vab/markdownEditor/index", component: "@/views/vab/markdownEditor/index",
meta: { title: "markdown编辑器", permissions: ["admin"] }, meta: { title: "markdown编辑器", permissions: ["admin"] },
}, },
{ {
path: "editor", path: "editor",
name: "Editor", name: "Editor",
component: "views/vab/editor/index", component: "@/views/vab/editor/index",
meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" }, meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" },
}, },
{ {
path: "qrCode", path: "qrCode",
name: "QrCode", name: "QrCode",
component: "views/vab/qrCode/index", component: "@/views/vab/qrCode/index",
meta: { title: "二维码", permissions: ["admin"] }, meta: { title: "二维码", permissions: ["admin"] },
}, },
{ {
path: "backToTop", path: "backToTop",
name: "BackToTop", name: "BackToTop",
component: "views/vab/backToTop/index", component: "@/views/vab/backToTop/index",
meta: { title: "返回顶部", permissions: ["admin"] }, meta: { title: "返回顶部", permissions: ["admin"] },
}, },
{ {
path: "lodash", path: "lodash",
name: "Lodash", name: "Lodash",
component: "views/vab/lodash/index", component: "@/views/vab/lodash/index",
meta: { title: "lodash", permissions: ["admin"] }, meta: { title: "lodash", permissions: ["admin"] },
}, },
{ {
path: "imgComparison", path: "imgComparison",
name: "ImgComparison", name: "ImgComparison",
component: "views/vab/imgComparison/index", component: "@/views/vab/imgComparison/index",
meta: { title: "图像拖拽比对", permissions: ["admin"] }, meta: { title: "图像拖拽比对", permissions: ["admin"] },
}, },
{ {
path: "codeGenerator", path: "codeGenerator",
name: "CodeGenerator", name: "CodeGenerator",
component: "views/vab/codeGenerator/index", component: "@/views/vab/codeGenerator/index",
meta: { title: "代码生成机", permissions: ["admin"] }, meta: { title: "代码生成机", permissions: ["admin"] },
}, },
{ {
path: "markdown", path: "markdown",
name: "Markdown", name: "Markdown",
component: "views/vab/markdown/index", component: "@/views/vab/markdown/index",
meta: { title: "markdown阅读器", permissions: ["admin"] }, meta: { title: "markdown阅读器", permissions: ["admin"] },
}, },
{ {
path: "smallComponents", path: "smallComponents",
name: "SmallComponents", name: "SmallComponents",
component: "views/vab/smallComponents/index", component: "@/views/vab/smallComponents/index",
meta: { title: "小组件", permissions: ["admin"] }, meta: { title: "小组件", permissions: ["admin"] },
}, },
{ {
path: "upload", path: "upload",
name: "Upload", name: "Upload",
component: "views/vab/upload/index", component: "@/views/vab/upload/index",
meta: { title: "上传", permissions: ["admin"] }, meta: { title: "上传", permissions: ["admin"] },
}, },
{ {
path: "sticky", path: "sticky",
name: "Sticky", name: "Sticky",
component: "views/vab/sticky/index", component: "@/views/vab/sticky/index",
meta: { title: "sticky吸附", permissions: ["admin"] }, meta: { title: "sticky吸附", permissions: ["admin"] },
}, },
{ {
path: "log", path: "log",
name: "Log", name: "Log",
component: "views/vab/errorLog/index", component: "@/views/vab/errorLog/index",
meta: { title: "错误日志模拟", permissions: ["admin"] }, meta: { title: "错误日志模拟", permissions: ["admin"] },
}, },
{ {
path: "more", path: "more",
name: "More", name: "More",
component: "views/vab/more/index", component: "@/views/vab/more/index",
meta: { title: "更多组件", permissions: ["admin"] }, meta: { title: "更多组件", permissions: ["admin"] },
}, },
], ],
@ -332,7 +332,7 @@ const data = [
{ {
path: "pay", path: "pay",
name: "Pay", name: "Pay",
component: "views/mall/pay/index", component: "@/views/mall/pay/index",
meta: { meta: {
title: "支付", title: "支付",
noKeepAlive: true, noKeepAlive: true,
@ -342,7 +342,7 @@ const data = [
{ {
path: "goodsList", path: "goodsList",
name: "GoodsList", name: "GoodsList",
component: "views/mall/goodsList/index", component: "@/views/mall/goodsList/index",
meta: { meta: {
title: "商品列表", title: "商品列表",
}, },
@ -350,7 +350,7 @@ const data = [
{ {
path: "goodsDetail", path: "goodsDetail",
name: "GoodsDetail", name: "GoodsDetail",
component: "views/mall/goodsDetail/index", component: "@/views/mall/goodsDetail/index",
meta: { meta: {
title: "商品详情", title: "商品详情",
}, },
@ -367,13 +367,13 @@ const data = [
{ {
path: "401", path: "401",
name: "Error401", name: "Error401",
component: "views/401", component: "@/views/401",
meta: { title: "401" }, meta: { title: "401" },
}, },
{ {
path: "404", path: "404",
name: "Error404", name: "Error404",
component: "views/404", component: "@/views/404",
meta: { title: "404" }, meta: { title: "404" },
}, },
], ],

4
src/store/modules/routes.js
View File

@ -4,7 +4,7 @@
*/ */
import { asyncRoutes, constantRoutes } from "@/router"; import { asyncRoutes, constantRoutes } from "@/router";
import { getRouterList } from "@/api/router"; import { getRouterList } from "@/api/router";
import { filterAllRoutes, filterAsyncRoutes } from "@/utils/handleRoutes"; import { convertRouter, filterAsyncRoutes } from "@/utils/handleRoutes";
const state = { routes: [], partialRoutes: [] }; const state = { routes: [], partialRoutes: [] };
const getters = { const getters = {
@ -35,7 +35,7 @@ const actions = {
async setAllRoutes({ commit }) { async setAllRoutes({ commit }) {
let { data } = await getRouterList(); let { data } = await getRouterList();
data.push({ path: "*", redirect: "/404", hidden: true }); data.push({ path: "*", redirect: "/404", hidden: true });
let accessRoutes = filterAllRoutes(data); let accessRoutes = convertRouter(data);
commit("setAllRoutes", accessRoutes); commit("setAllRoutes", accessRoutes);
return accessRoutes; return accessRoutes;
}, },

31
src/utils/handleRoutes.js
View File

@ -4,8 +4,8 @@
* @param constantRoutes * @param constantRoutes
* @returns {*} * @returns {*}
*/ */
export function filterAllRoutes(constantRoutes) { export function convertRouter(asyncRoutes) {
return constantRoutes.filter((route) => { return asyncRoutes.map((route) => {
if (route.component) { if (route.component) {
if (route.component === "Layout") { if (route.component === "Layout") {
route.component = (resolve) => require(["@/layouts"], resolve); route.component = (resolve) => require(["@/layouts"], resolve);
@ -13,29 +13,16 @@ export function filterAllRoutes(constantRoutes) {
route.component = (resolve) => route.component = (resolve) =>
require(["@/layouts/EmptyLayout"], resolve); require(["@/layouts/EmptyLayout"], resolve);
} else { } else {
let path = "views/" + route.component; const index = route.component.indexOf("views");
if ( const path =
new RegExp("^/views/.*$").test(route.component) || index > 0 ? route.component.slice(index) : `views/${route.component}`;
new RegExp("^views/.*$").test(route.component)
) {
path = route.component;
} else if (new RegExp("^/.*$").test(route.component)) {
path = "views" + route.component;
} else if (new RegExp("^@views/.*$").test(route.component)) {
path = route.component.slice(1);
} else {
path = "views/" + route.component;
}
route.component = (resolve) => require([`@/${path}`], resolve); route.component = (resolve) => require([`@/${path}`], resolve);
} }
} }
if (route.children && route.children.length) { if (route.children && route.children.length)
route.children = filterAllRoutes(route.children); route.children = convertRouter(route.children);
} if (route.children && route.children.length === 0) delete route.children;
if (route.children && route.children.length === 0) { return route;
delete route.children;
}
return true;
}); });
} }