es网站开发,网站建设合同 英文,wordpress 站点地址 wordpress地址,网站建设网络公司门户网站用户端需要分板块展示#xff0c;板块内容由管理端配置#xff0c;包括板块名称#xff0c;访问路径#xff0c;路由组件#xff0c;展示顺序#xff0c;是否展示。如下图所示#xff1a; 用户访问门户网站时#xff0c;展示菜单跳转通过板块配置#xff0c;动… 门户网站用户端需要分板块展示板块内容由管理端配置包括板块名称访问路径路由组件展示顺序是否展示。如下图所示 用户访问门户网站时展示菜单跳转通过板块配置动态生成路由。
1.后端接口获取路由 GetMapping(value /router)public Result? getRouterList() {LambdaQueryWrapperBlock query new LambdaQueryWrapper();query.eq(Block::getIsShow, true).orderByAsc(Block::getSort);ListBlock blockList blockService.list(query);ListMapString, Object routeMapList new ArrayList();blockList.forEach(block - {MapString, Object map new HashMap();map.put(path, block.getPath());map.put(component, block.getComponent());map.put(name, block.getComponent());routeMapList.add(map);});return Result.OK(routeMapList);}
2.路由配置文件 router/index.ts
import {createRouter, createWebHashHistory} from vue-routerconst router createRouter({history: createWebHashHistory(), // hash模式createWebHashHistoryhistory模式createWebHistoryroutes: [{path: /404,component: () import(/views/404.vue),hidden: true},]
})export default router3.路由守卫 router/guard/index.ts
import {Router} from vue-router
import {getRouterList} from /api/block;
import mainStore from ../../store;let dynamicRouters []export async function dynamicRouter(router: Router) {const {data: res} await getRouterList()dynamicRouters res.resultconst routeList transformObjToRoute(dynamicRouters)routeList.forEach((route: any) {//添加路由router.addRoute(route);});
}/*** views目录下找页面设置component* param routeList*/
function transformObjToRoute(routeList: any) {let dynamicViewsModules: any import.meta.glob(../../views/**/*.{vue,tsx});routeList.forEach((route: any) {const component route.component as string;if (component) {route.component dynamicImport(dynamicViewsModules, component)}});return routeList;
}function dynamicImport(dynamicViewsModules: any, component: string) {const keys Object.keys(dynamicViewsModules);const matchKeys keys.filter((key) {const k key.replace(../../views, );const startFlag component.startsWith(/);const endFlag component.endsWith(.vue) || component.endsWith(.tsx);const startIndex startFlag ? 0 : 1;const lastIndex endFlag ? k.length : k.lastIndexOf(.);return k.substring(startIndex, lastIndex) component;});if (matchKeys?.length 1) {const matchKey matchKeys[0];return dynamicViewsModules[matchKey];} else if (matchKeys?.length 1) {return;}
}/*** 页面未找到*/
export const PAGE_NOT_FOUND_ROUTE: any {path: /:path(.*)*,name: NotFound,component: () import(/views/404.vue)
};/*** 动态路由权限控制* param router*/
export function setupPermissionGuard(router: Router) {router.beforeEach(async (to, from, next) {//判断是否已经添加过动态路由添加过直接放行if (mainStore.getters.getIsDynamicAddedRoute) {next();return;}//没有添加过添加添加后跳转页面await dynamicRouter(router)router.addRoute(PAGE_NOT_FOUND_ROUTE);mainStore.commit(setDynamicAddedRoute, {isDynamicAddedRoute: true})next({...to, replace: true})});
}4.main.ts配置路由守卫
import App from ./App.vue
import router from /router
import {setupPermissionGuard} from /router/guardasync function bootstrap() {// 创建应用实例const app createApp(App);app.use(router) // 引用路由实例setupPermissionGuard(router);await router.isReady();// 挂载应用app.mount(#app, true);
}bootstrap()
