mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-06 03:58:00 +08:00
🔥🔥🔥完善路由后端渲染方案，弃用之前写法
This commit is contained in:
chuzhixin
parent
dc02bb01cd
commit
05d1d9dc1a
@ -7,7 +7,7 @@ const data = [
|
||||
{
|
||||
path: "index",
|
||||
name: "Index",
|
||||
component: "views/index/index",
|
||||
component: "@/views/index/index",
|
||||
meta: {
|
||||
title: "首页",
|
||||
icon: "home",
|
||||
@ -25,7 +25,7 @@ const data = [
|
||||
{
|
||||
path: "personalCenter",
|
||||
name: "PersonalCenter",
|
||||
component: "views/personalCenter/index",
|
||||
component: "@/views/personalCenter/index",
|
||||
meta: {
|
||||
title: "个人中心",
|
||||
},
|
||||
@ -42,19 +42,19 @@ const data = [
|
||||
{
|
||||
path: "userManagement",
|
||||
name: "UserManagement",
|
||||
component: "views/personnelManagement/userManagement/index",
|
||||
component: "@/views/personnelManagement/userManagement/index",
|
||||
meta: { title: "用户管理" },
|
||||
},
|
||||
{
|
||||
path: "roleManagement",
|
||||
name: "RoleManagement",
|
||||
component: "views/personnelManagement/roleManagement/index",
|
||||
component: "@/views/personnelManagement/roleManagement/index",
|
||||
meta: { title: "角色管理" },
|
||||
},
|
||||
{
|
||||
path: "menuManagement",
|
||||
name: "MenuManagement",
|
||||
component: "views/personnelManagement/menuManagement/index",
|
||||
component: "@/views/personnelManagement/menuManagement/index",
|
||||
meta: { title: "菜单管理", badge: "New" },
|
||||
},
|
||||
],
|
||||
@ -70,7 +70,7 @@ const data = [
|
||||
{
|
||||
path: "permissions",
|
||||
name: "Permission",
|
||||
component: "views/vab/permissions/index",
|
||||
component: "@/views/vab/permissions/index",
|
||||
meta: {
|
||||
title: "权限控制",
|
||||
permissions: ["admin", "editor"],
|
||||
@ -90,19 +90,19 @@ const data = [
|
||||
{
|
||||
path: "awesomeIcon",
|
||||
name: "AwesomeIcon",
|
||||
component: "views/vab/icon/index",
|
||||
component: "@/views/vab/icon/index",
|
||||
meta: { title: "常规图标" },
|
||||
},
|
||||
{
|
||||
path: "remixIcon",
|
||||
name: "RemixIcon",
|
||||
component: "views/vab/icon/remixIcon",
|
||||
component: "@/views/vab/icon/remixIcon",
|
||||
meta: { title: "小清新图标" },
|
||||
},
|
||||
{
|
||||
path: "colorfulIcon",
|
||||
name: "ColorfulIcon",
|
||||
component: "views/vab/icon/colorfulIcon",
|
||||
component: "@/views/vab/icon/colorfulIcon",
|
||||
meta: { title: "多彩图标" },
|
||||
},
|
||||
],
|
||||
@ -120,13 +120,13 @@ const data = [
|
||||
{
|
||||
path: "comprehensiveTable",
|
||||
name: "ComprehensiveTable",
|
||||
component: "views/vab/table/index",
|
||||
component: "@/views/vab/table/index",
|
||||
meta: { title: "综合表格" },
|
||||
},
|
||||
{
|
||||
path: "inlineEditTable",
|
||||
name: "InlineEditTable",
|
||||
component: "views/vab/table/inlineEditTable",
|
||||
component: "@/views/vab/table/inlineEditTable",
|
||||
meta: { title: "行内编辑" },
|
||||
},
|
||||
],
|
||||
@ -134,44 +134,44 @@ const data = [
|
||||
{
|
||||
path: "map",
|
||||
name: "Map",
|
||||
component: "views/vab/map/index",
|
||||
component: "@/views/vab/map/index",
|
||||
meta: { title: "地图", permissions: ["admin"], badge: "Pro" },
|
||||
},
|
||||
{
|
||||
path: "webSocket",
|
||||
name: "WebSocket",
|
||||
component: "views/vab/webSocket/index",
|
||||
component: "@/views/vab/webSocket/index",
|
||||
meta: { title: "webSocket", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "form",
|
||||
name: "Form",
|
||||
component: "views/vab/form/index",
|
||||
component: "@/views/vab/form/index",
|
||||
meta: { title: "表单", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "element",
|
||||
name: "Element",
|
||||
component: "views/vab/element/index",
|
||||
component: "@/views/vab/element/index",
|
||||
meta: { title: "常用组件", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "tree",
|
||||
name: "Tree",
|
||||
component: "views/vab/tree/index",
|
||||
component: "@/views/vab/tree/index",
|
||||
meta: { title: "树", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "card",
|
||||
name: "Card",
|
||||
component: "views/vab/card/index",
|
||||
component: "@/views/vab/card/index",
|
||||
meta: { title: "卡片", permissions: ["admin"] },
|
||||
},
|
||||
|
||||
{
|
||||
path: "betterScroll",
|
||||
name: "BetterScroll",
|
||||
component: "views/vab/betterScroll/index",
|
||||
component: "@/views/vab/betterScroll/index",
|
||||
meta: {
|
||||
title: "滚动侦测",
|
||||
permissions: ["admin"],
|
||||
@ -180,12 +180,12 @@ const data = [
|
||||
{
|
||||
path: "verify",
|
||||
name: "Verify",
|
||||
component: "views/vab/verify/index",
|
||||
component: "@/views/vab/verify/index",
|
||||
meta: { title: "验证码", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "menu1",
|
||||
component: "views/vab/nested/menu1/index",
|
||||
component: "@/views/vab/nested/menu1/index",
|
||||
name: "Menu1",
|
||||
alwaysShow: true,
|
||||
meta: {
|
||||
@ -198,14 +198,14 @@ const data = [
|
||||
name: "Menu1-1",
|
||||
alwaysShow: true,
|
||||
meta: { title: "嵌套路由 1-1" },
|
||||
component: "views/vab/nested/menu1/menu1-1/index",
|
||||
component: "@/views/vab/nested/menu1/menu1-1/index",
|
||||
|
||||
children: [
|
||||
{
|
||||
path: "menu1-1-1",
|
||||
name: "Menu1-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",
|
||||
name: "Magnifier",
|
||||
component: "views/vab/magnifier/index",
|
||||
component: "@/views/vab/magnifier/index",
|
||||
meta: { title: "放大镜", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "echarts",
|
||||
name: "Echarts",
|
||||
component: "views/vab/echarts/index",
|
||||
component: "@/views/vab/echarts/index",
|
||||
meta: { title: "图表", permissions: ["admin"] },
|
||||
},
|
||||
|
||||
{
|
||||
path: "loading",
|
||||
name: "Loading",
|
||||
component: "views/vab/loading/index",
|
||||
component: "@/views/vab/loading/index",
|
||||
meta: { title: "loading", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "player",
|
||||
name: "Player",
|
||||
component: "views/vab/player/index",
|
||||
component: "@/views/vab/player/index",
|
||||
meta: { title: "视频播放器", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "markdownEditor",
|
||||
name: "MarkdownEditor",
|
||||
component: "views/vab/markdownEditor/index",
|
||||
component: "@/views/vab/markdownEditor/index",
|
||||
meta: { title: "markdown编辑器", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "editor",
|
||||
name: "Editor",
|
||||
component: "views/vab/editor/index",
|
||||
component: "@/views/vab/editor/index",
|
||||
meta: { title: "富文本编辑器", permissions: ["admin"], badge: "New" },
|
||||
},
|
||||
{
|
||||
path: "qrCode",
|
||||
name: "QrCode",
|
||||
component: "views/vab/qrCode/index",
|
||||
component: "@/views/vab/qrCode/index",
|
||||
meta: { title: "二维码", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "backToTop",
|
||||
name: "BackToTop",
|
||||
component: "views/vab/backToTop/index",
|
||||
component: "@/views/vab/backToTop/index",
|
||||
meta: { title: "返回顶部", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "lodash",
|
||||
name: "Lodash",
|
||||
component: "views/vab/lodash/index",
|
||||
component: "@/views/vab/lodash/index",
|
||||
meta: { title: "lodash", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "imgComparison",
|
||||
name: "ImgComparison",
|
||||
component: "views/vab/imgComparison/index",
|
||||
component: "@/views/vab/imgComparison/index",
|
||||
meta: { title: "图像拖拽比对", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "codeGenerator",
|
||||
name: "CodeGenerator",
|
||||
component: "views/vab/codeGenerator/index",
|
||||
component: "@/views/vab/codeGenerator/index",
|
||||
meta: { title: "代码生成机", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "markdown",
|
||||
name: "Markdown",
|
||||
component: "views/vab/markdown/index",
|
||||
component: "@/views/vab/markdown/index",
|
||||
meta: { title: "markdown阅读器", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "smallComponents",
|
||||
name: "SmallComponents",
|
||||
component: "views/vab/smallComponents/index",
|
||||
component: "@/views/vab/smallComponents/index",
|
||||
meta: { title: "小组件", permissions: ["admin"] },
|
||||
},
|
||||
|
||||
{
|
||||
path: "upload",
|
||||
name: "Upload",
|
||||
component: "views/vab/upload/index",
|
||||
component: "@/views/vab/upload/index",
|
||||
meta: { title: "上传", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "sticky",
|
||||
name: "Sticky",
|
||||
component: "views/vab/sticky/index",
|
||||
component: "@/views/vab/sticky/index",
|
||||
meta: { title: "sticky吸附", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "log",
|
||||
name: "Log",
|
||||
component: "views/vab/errorLog/index",
|
||||
component: "@/views/vab/errorLog/index",
|
||||
meta: { title: "错误日志模拟", permissions: ["admin"] },
|
||||
},
|
||||
{
|
||||
path: "more",
|
||||
name: "More",
|
||||
component: "views/vab/more/index",
|
||||
component: "@/views/vab/more/index",
|
||||
meta: { title: "更多组件", permissions: ["admin"] },
|
||||
},
|
||||
],
|
||||
@ -332,7 +332,7 @@ const data = [
|
||||
{
|
||||
path: "pay",
|
||||
name: "Pay",
|
||||
component: "views/mall/pay/index",
|
||||
component: "@/views/mall/pay/index",
|
||||
meta: {
|
||||
title: "支付",
|
||||
noKeepAlive: true,
|
||||
@ -342,7 +342,7 @@ const data = [
|
||||
{
|
||||
path: "goodsList",
|
||||
name: "GoodsList",
|
||||
component: "views/mall/goodsList/index",
|
||||
component: "@/views/mall/goodsList/index",
|
||||
meta: {
|
||||
title: "商品列表",
|
||||
},
|
||||
@ -350,7 +350,7 @@ const data = [
|
||||
{
|
||||
path: "goodsDetail",
|
||||
name: "GoodsDetail",
|
||||
component: "views/mall/goodsDetail/index",
|
||||
component: "@/views/mall/goodsDetail/index",
|
||||
meta: {
|
||||
title: "商品详情",
|
||||
},
|
||||
@ -367,13 +367,13 @@ const data = [
|
||||
{
|
||||
path: "401",
|
||||
name: "Error401",
|
||||
component: "views/401",
|
||||
component: "@/views/401",
|
||||
meta: { title: "401" },
|
||||
},
|
||||
{
|
||||
path: "404",
|
||||
name: "Error404",
|
||||
component: "views/404",
|
||||
component: "@/views/404",
|
||||
meta: { title: "404" },
|
||||
},
|
||||
],
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
*/
|
||||
import { asyncRoutes, constantRoutes } from "@/router";
|
||||
import { getRouterList } from "@/api/router";
|
||||
import { filterAllRoutes, filterAsyncRoutes } from "@/utils/handleRoutes";
|
||||
import { convertRouter, filterAsyncRoutes } from "@/utils/handleRoutes";
|
||||
|
||||
const state = { routes: [], partialRoutes: [] };
|
||||
const getters = {
|
||||
@ -35,7 +35,7 @@ const actions = {
|
||||
async setAllRoutes({ commit }) {
|
||||
let { data } = await getRouterList();
|
||||
data.push({ path: "*", redirect: "/404", hidden: true });
|
||||
let accessRoutes = filterAllRoutes(data);
|
||||
let accessRoutes = convertRouter(data);
|
||||
commit("setAllRoutes", accessRoutes);
|
||||
return accessRoutes;
|
||||
},
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
* @param constantRoutes
|
||||
* @returns {*}
|
||||
*/
|
||||
export function filterAllRoutes(constantRoutes) {
|
||||
return constantRoutes.filter((route) => {
|
||||
export function convertRouter(asyncRoutes) {
|
||||
return asyncRoutes.map((route) => {
|
||||
if (route.component) {
|
||||
if (route.component === "Layout") {
|
||||
route.component = (resolve) => require(["@/layouts"], resolve);
|
||||
@ -13,29 +13,16 @@ export function filterAllRoutes(constantRoutes) {
|
||||
route.component = (resolve) =>
|
||||
require(["@/layouts/EmptyLayout"], resolve);
|
||||
} else {
|
||||
let path = "views/" + route.component;
|
||||
if (
|
||||
new RegExp("^/views/.*$").test(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;
|
||||
}
|
||||
const index = route.component.indexOf("views");
|
||||
const path =
|
||||
index > 0 ? route.component.slice(index) : `views/${route.component}`;
|
||||
route.component = (resolve) => require([`@/${path}`], resolve);
|
||||
}
|
||||
}
|
||||
if (route.children && route.children.length) {
|
||||
route.children = filterAllRoutes(route.children);
|
||||
}
|
||||
if (route.children && route.children.length === 0) {
|
||||
delete route.children;
|
||||
}
|
||||
return true;
|
||||
if (route.children && route.children.length)
|
||||
route.children = convertRouter(route.children);
|
||||
if (route.children && route.children.length === 0) delete route.children;
|
||||
return route;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user