恒美微站 Logo 恒美微站
  • 首页
  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心
  • 联系我们

vue动态路由效果

  • 首页
  • 资讯中心
  • /
  • vue动态路由效果

相关资讯

基于python的语音标注及审核系统1(设计源文件+万字报告+讲解)(支持资料、图片参考_相关定制)_ 2026/8/12 15:36:01
软考 系统架构设计师历年真题集萃(318)—— 2026年5月系统架构设计师真题11 2026/8/12 15:36:01
一桶一码,RFID让桶装饮用水物流管理更高效 2026/8/12 15:36:01

最新资讯

交换机级联与堆叠技术详解:从原理到实战配置与避坑指南
AI Agent白手起家60: 多智能体架构解析与 LangGraph 入门
Next.js App Router 中 AI 流式响应实现与优化指南
为什么你的Windows 11 LTSC系统需要Microsoft Store?完整安装指南
G-Helper启动问题实战解决方案:从诊断到预防的完整流程
远程联机软件推荐 远程联机用哪个软件好

今日推荐

终极Navicat重置指南:3种专业方案实现Mac版无限试用
终极免费围棋AI训练指南:如何用KaTrain快速提升你的棋艺水平
3分钟掌握res-downloader:全网视频音频图片资源一键下载终极指南

本周热门

5分钟告别提取码焦虑:baidupankey如何智能破解百度网盘资源锁
如何快速生成中国车牌图片:Python开源工具完整指南
当 LLM 遇见大文档:主流开源项目如何处理上下文超限

本月精选

如何用DamaiHelper实现演唱会门票的智能自动化抢购:完整技术解决方案指南
第4篇:59 倍性能差距的索引瓶颈定位——一次教科书级的全表扫描调优
终极歌词批量下载神器:5分钟解决离线音乐库歌词同步难题

vue动态路由效果

发布时间:2026/8/12 15:36:01
vue动态路由效果 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行内容

关于恒美微站

恒美微站专注于为个体商户、工作室提供极简自助建站服务,让每个人都能轻松拥有专业网站。

快速链接

  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心

服务项目

  • 可视化建站
  • 拖拽编辑
  • 主题定制
  • SEO 优化
  • 网站托管

联系方式

  • 📍 地址:北京市朝阳区建国路 88 号
  • 📞 电话:400-888-8888
  • ✉️ 邮箱:info@hmyw.cn
  • 🕐 时间:周一至周日 9:00-18:00

© 2024 恒美微站 hmyw.cn 版权所有 | 京 ICP 备 12345678 号