vue框架安装文档安装 | vue-next-adminhttps://lyt-top.github.io/vue-next-admin-doc-preview/home/install/一动态路由修改1. 配置代理路径vite.config.ts修改修改其proxy代理25到38行左右根据接口不同其代理名称不同server: { host: 0.0.0.0, port: env.VITE_PORT as unknown as number, open: JSON.parse(env.VITE_OPEN), hmr: true, proxy: { /pc: { target: 接口地址, changeOrigin: true, }, }, },2. 修改响应式拦截效果位置src/utils/request.ts38行左右修改将if (res.code res.code ! 0) { 修改成 if (res.code ! undefined res.code ! 0 res.code ! 1) {service.interceptors.response.use( (response) { // 对响应数据做点什么 const res response.data; if (res.code ! undefined res.code ! 0 res.code ! 1) { // token 过期或者账号已在别处登录 if (res.code 401 || res.code 4001) { Session.clear(); // 清除浏览器全部临时缓存 window.location.href /; // 去登录页 ElMessageBox.alert(你已被登出请重新登录, 提示, {}) .then(() {}) .catch(() {}); } return Promise.reject(service.interceptors.response); } else { return res; } }, (error) { // 对响应错误做点什么 if (error.message.indexOf(timeout) ! -1) { ElMessage.error(网络超时); } else if (error.message Network Error) { ElMessage.error(网络连接错误); } else { if (error.response.data) ElMessage.error(error.response.statusText); else ElMessage.error(接口路径找不到); } return Promise.reject(error); } );3. 修改请求接口位置src/api/login/index.ts修改将signIn中的url改成登录接口路径4. 在登录页中请求登录接口位置src/views/login/component/account.vue修改1. 引入登录接口import { useLoginApi } from //api/login/index;2. 声明变量 const loginApi useLoginApi();3. 请求接口// 登录 const onSignIn async () { state.loading.signIn true; try { // 1、调用登录接口参数username、password const res await loginApi.signIn({ username: state.ruleForm.userName, password: state.ruleForm.password, }); // 2、接口成功标志 code 1或200 if (res.code ! 1 res.code ! 200) { ElMessage.error(res.msg || 登录失败); return; } // 3、存储 token 到浏览器缓存必须用 Session.set模板路由守卫 / request 拦截器都用 Session.get(token) 读 Cookie存 localStorage 读不到会导致路由初始化失败、加载动画卡死 Session.set(token, res.data.token); // 4、存储用户信息接口 userinfo 需转成模板所需的 userInfos 结构供 /src/stores/userInfo.ts 使用 Session.set(userInfo, { userName: res.data.userinfo.username, photo: res.data.userinfo.avatar ? 地址${res.data.userinfo.avatar} : , time: new Date().getTime(), roles: res.data.userinfo.role_id 1 ? [admin] : [common], authBtnList: [btn.add, btn.del, btn.edit, btn.link], }); // 5、存储后端菜单数据供后端控制路由 isRequestRoutestrue 时使用 Session.set(menuList, res.data.menus); // 6、初始化路由 if (!themeConfig.value.isRequestRoutes) { // 前端控制路由2、请注意执行顺序 const isNoPower await initFrontEndControlRoutes(); signInSuccess(isNoPower); } else { // 后端控制路由isRequestRoutes 为 true则开启后端控制路由 // 添加完动态路由再进行 router 跳转否则可能报错 No match found for location with path / const isNoPower await initBackEndControlRoutes(); // 执行完 initBackEndControlRoutes再执行 signInSuccess signInSuccess(isNoPower); } } catch (error) { // 请求失败request.ts 拦截器已弹出错误提示 } finally { state.loading.signIn false; } };4. 开启动态路由位置 src/stores/themeConfig.ts修改将 isRequestRoutes: false,改为 isRequestRoutes: true,134行左右并在最后的setThemeConfig中加上 this.themeConfig.isRequestRoutes true;5. 菜单数据渲染到左侧菜单栏中位置: src/router/backEnd.ts修改删除 import { useMenuApi } from //api/menu/index;和const menuApi useMenuApi();动态路由请求效果。并修改以下内容92到118行左右/** * 添加动态路由 * method router.addRoute * description 此处循环为 dynamicRoutes//router/route第一个顶级 children 的路由一维数组非多级嵌套 * link 参考https://next.router.vuejs.org/zh/api/#addroute */ export async function setAddRoute() { await setFilterRouteEnd().forEach((route: RouteRecordRaw) { router.addRoute(route); }); } // 有子菜单的父级菜单统一使用子路由出口组件 const parentComponent /layout/routerView/parent; // 无对应页面的菜单统一指向 404 const noPageComponent /error/404; // 模块加载时快照 route.ts 中 dynamicRoutes.children 定义的业务路由。 // 后续 dynamicRoutes[0].children 会被接口菜单覆盖但此快照始终保留 route.ts 的原始定义 const staticRouteList dynamicRoutes[0].children || []; /** * 获取路由菜单 * description 菜单数据在登录接口返回时已存入 Session(menuList)此处读取并转换为路由所需格式 * returns 返回 { data: 嵌套路由菜单 } */ export function getBackEndControlRoutes() { const menus Session.get(menuList) || []; const tree formatBackMenu(menus); return Promise.resolve({ data: tree }); } /** * 从 route.ts 的 dynamicRoutes.children 中提取 path → 路由配置 * 供接口菜单匹配页面组件只需在 route.ts 的 dynamicRoutes.children 中定义业务页面路由 * 即可实现「点击接口返回的树形菜单 → 显示对应页面」未在 route.ts 中定义 path 的菜单进入 404 */ const getStaticRouteMap () { const routeMap new Mapstring, any(); staticRouteList.forEach((r: any) { routeMap.set(r.path.replace(/^\//, ), r); }); return routeMap; }; /** * 将接口返回的扁平菜单pid 关联转成嵌套树并补全路由所需字段 * param menus 接口返回的 menus 数组 * returns 嵌套路由菜单数组 */ export function formatBackMenu(menus: any) { const map new Mapnumber, any(); menus.forEach((m: any) { map.set(m.id, { ...m, component: , meta: { title: m.title, icon: m.icon, isKeepAlive: true }, children: [] as any[], }); }); // 构建 route.ts 业务路由的 path → 路由 查找表 const routeMap getStaticRouteMap(); const tree: any[] []; map.forEach((item) { if (item.pid 0 || !map.has(item.pid)) { tree.push(item); } else { map.get(item.pid).children.push(item); } }); // 递归拼接完整 path、生成唯一 name、补 component / redirect const setTree (list: any[], parentPath: string) { list.forEach((item) { item.path ${parentPath}/${item.path.replace(/^\//, )}; item.name ${item.path.replace(/[^a-zA-Z0-9]/g, )}_${item.id}; if (item.children.length 0) { item.component parentComponent; // 先递归拼接子菜单完整 path再取其第一个作为父级默认跳转 setTree(item.children, item.path); item.redirect item.children[0].path; } else { // 从 route.ts 的 dynamicRoutes.children 中按 path 匹配页面组件 const matched routeMap.get(item.path.replace(/^\//, )); if (matched) { item.component matched.component; // 合并 route.ts 中定义的路由 metatitle/icon 等接口菜单数据优先 item.meta { ...item.meta, ...(matched.meta || {}) }; } else { item.component noPageComponent; } } }); }; setTree(tree, ); return tree; }6. 修改路由页面无用页面路径位置 src/router/route.ts修改完整页面内容如下若要添加页面需要在export const dynamicRoutes: ArrayRouteRecordRaw [ 内容中的children中进行修改import { RouteRecordRaw } from vue-router; // 扩展 RouteMeta 接口 declare module vue-router { interface RouteMeta { title?: string; isLink?: string; isHide?: boolean; isKeepAlive?: boolean; isAffix?: boolean; isIframe?: boolean; roles?: string[]; icon?: string; } } /** * 定义动态路由 */ export const dynamicRoutes: ArrayRouteRecordRaw [ { path: /, name: /, component: () import(//layout/index.vue), redirect: /home, meta: { isKeepAlive: true, }, children: [ // 首页 { path: /home, name: home, component: () import(//views/home/index.vue), meta: { title: 首页, icon: iconfont icon-barcode-qr, isKeepAlive: true, }, }, // 创业/就业 { path: /article, name: article, // 根据图1路径 src/views/chart/index.vue 进行引入 component: () import(//views/chart/index.vue), meta: { title: 创业/就业, icon: iconfont icon-gerenzhongxin, isKeepAlive: true, roles: [admin, common], }, }, ], }, ]; /** * 定义404、401界面 */ export const notFoundAndNoPower [ { path: /:path(.*)*, name: notFound, component: () import(//views/error/404.vue), meta: { title: message.staticRoutes.notFound, isHide: true, }, }, { path: /401, name: noPower, component: () import(//views/error/401.vue), meta: { title: message.staticRoutes.noPower, isHide: true, }, }, ]; /** * 定义静态路由默认路由 */ export const staticRoutes: ArrayRouteRecordRaw [ { path: /login, name: login, component: () import(//views/login/index.vue), meta: { title: 登录, }, }, ];二 其他内容修改1. 去除水印效果位置src/stores/themeConfig.ts修改 isWartermark的true改为false105行左右若修改完后还是有水印给其加上强制去除水印的效果在setThemeConfig中加上 this.themeConfig.isWartermark false;2. 关闭赞助商位置src/App.vue修改删除Sponsors /第8行和const Sponsors defineAsyncComponent(() import(//layout/sponsors/index.vue));29行内容