vue-router的菜单换成二级目录访问

最新推荐文章于 2025-09-24 16:19:35 发布
原创 最新推荐文章于 2025-09-24 16:19:35 发布 · 873 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍如何将Vue-Router的一级目录转换为二级目录访问。只需在vue.config.js中进行简单配置，即可实现二级目录的效果，适用于前端开发者优化项目路由结构。

问题

需将vue-router的菜单从一级目录换成二级目录访问

实现

在这里插入图片描述

只需在vue.config.js中配置就行了

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

vue二级菜单添加链接+点击二级菜单渲染页面
lucky的专栏
04-23 2334
menu加router 二级菜单加路径
Vue全家桶 Vue-router的详细介绍
m0_71485750的博客
07-31 1492
在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向；...
nginx部署vue项目_vue 多项目部署---二级目录
weixin_39797780的博客
12-05 759
新项目：同一域名下部署多个vue项目，根目录vue项目不需要按下面的方式进行打包部署https://www.bitedit.com/下面三个项目以二级目录部署https://www.bitedit.com/hmange https://www.bitedit.com/api https://www.bitedit.com/restful 以上链接不可用，作为示例，不要点击。此方法适用于多vue项目...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十）打包项目并发布到子目录
kchangfu的博客
12-02 505
前情回顾 通过上一章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（九）再把内容页面渲染出来》的学习，我们其实已经完成了我们设想的项目的开发。但是，我们做好的这套东西，是基于 nodejs 开发的。而我们最终希望，我们开发的项目，生成好一堆文件，然后随便通过任何一个 http 服务就能跑起来，也就是，还原成我们熟悉的 html+css+js 的模式。
vue-router + el-menu动态渲染二级菜单
qq_40128591的博客
10-31 1274
vue-router + el-menu动态渲染二级菜单
vue 动态css_vue--安装插件，写路由
weixin_39620279的博客
12-12 190
1、安装vue-router插件npm install vue-router --save其中'--save'是为了保存在package.json配置中，写在配置文件中下次install的时候，依赖包就会按照json文件中的配置项进行安装2、在src中新建一个配置动态路由的js文件，js文件主要配置对应的路径跳转到对应的组件页面，所以要先导入对应的组件，然后将path和component一一对应3...
11.Vue.js前端框架：vue-router路由
小白_xm
04-29 1284
1、常用插件有哪些 在利用 Vue.js 开发一个完整的单页 Web 应用时，还需要使用 Vue.js 提供的插件。Vue.js 比较常用的插件是 vue-router 和 axios。其中 vue-router 提供的是路由管理的功能，axios 提供的是数据请求的功能。 2、应用 vue-router 实现路由 2.1 vue-router 插件引入 vue-router 插件可以提供路由管理的功能。而在使用该插件之前需要在页面引入该插件，引用 vue-router 插件的方法主要有下列三种方式： v
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9573
未完
vue3 二级路由-内嵌外链解决方案(iframe)
qq_28805447的博客
10-28 5188
vue3 二级路由-内嵌外链解决方案(iframe)
gin-vue-admin如何创建代码-学习笔记
最新发布
Unity、UE5开发
09-24 643
请支持gin-vue-admin作者，商用切记购买正版授权，支持国人技术发展有问题，可以进gva群里沟通有需要，可以加我wx: canchs，注明来自csdn，技术上或能相互帮助最后，祝福大家开发愉快。
用vue-router实现二级菜单内容的转换
热门推荐
傲娇的黄同学的博客
11-30 1万+
用vue-router实现二级菜单内容的转换
如何实现Vue路由的二级菜单
青春木鱼的博客
08-13 5084
当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。
【VUE】Vue2菜单搜索并跳转指定页面
SZnAl的博客
03-28 3057
有时候后台管理系统复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。菜单目录支持搜索并且可直接跳转便可以达到以上诉求。
vue二级路由跳转
qq_40664253的博客
07-30 6960
主页跳转到我的页面（My.vue），‘我的页面’又有很多子页面，点击子页面显示对应内容。 方法一： 在router/index.js里： 引入组件（路径因人而异）： 然后进行配置（其余子组件同orders写法）： 在父组件(此时二级路由的父组件为My.vue)的根标签里写出口<router-view></router-view> 在父组件里，我是用li标签遍历 ...
vue三级路由内容在二级路由中展示(平级展示)，并保存选中状态。(Vue-router 如何在嵌套路由的同时做多级菜单。)
CCKing7的博客
03-02 4226
1.Vue-router 如何在嵌套路由的同时做多级菜单。 2.vue三级路由内容在二级路由中展示，并保存选中状态。 3.vue路由同级展示。
vue 关于路由和导航守卫
m0_61472704的博客
06-15 766
vue路由与导航守卫
Vue Router4路由
xwnxwn的专栏
04-16 1622
原文链接：https://blog.csdn.net/qq_41260655/article/details/119384770 1、Vue-router是什么？ Vue.js 的官方路由（就这么简单一句话） 2、Vue Router4 新特性 简单对比总结了一下 Vue3支持最新版本由于Vue 3 引入了createApp API，该API更改了将插件添加到Vue实例的方式。 因此，以前版本的Vue Router将与Vue3不兼容。Vue Router 4 引入了createRouter API，该
vue如何部署二级目录
sslcsq的博客
08-01 4955
有的时候，我们的域名很珍贵，除了二级域名外。 我们不仅可以把项目部署到当前域名下 也可以部署到二级目录下，这样的话，就可以部署多个项目了。 比如说，我有一个域名为sslcsq.com的服务器，我想部署两个项目： 京东项目：http://sslcsq.com/jingdong 淘宝项目：http://sslcsq.com/taobao 说一下这里会遇到得问题 普通项目不会有问题， 但是如果是单页项目(比如vue写的单页面)，而且单页项目的路由用的是history模式，不管是vue还是react都会出现一个问题
四级树形结构的菜单数据 如何转换成路由树 用js
04-29
<think>嗯，用户想知道如何用JavaScript将四级树形结构的菜单数据转换为路由树。首先，我需要明确四级树形结构的具体结构。通常，树形结构的每个节点可能有子节点，而四级意味着最多有四层。比如，根节点是第一级，然后是第二级，第三级，第四级。 接下来，路由树的结构通常是类似Vue Router或React Router的配置，每个路由对象可能有path、component、children等属性。所以转换的关键在于遍历原始菜单数据，生成对应的路由对象，并处理嵌套关系。 用户可能遇到的难点包括如何处理多级嵌套，如何动态生成路径，以及如何处理组件映射。比如，菜单数据中的每个节点可能需要对应一个路由路径，而组件可能需要根据菜单的类型或名称来动态导入。 另外，需要注意路由的路径拼接，比如父路由的path和子路由的path如何组合。例如，父路由的path是'/parent'，子路由的path是'child'，那么完整的路径应该是'/parent/child'。 还要考虑组件是否存在的判断，比如有些菜单节点可能只是一个分类，没有对应的组件，这时候可能需要过滤掉这些节点，或者设置一个默认的组件。 可能需要递归处理每个节点，遍历所有层级的子节点，直到第四级。递归函数需要接收当前节点和父路径，以便生成正确的路径。 此外，用户可能希望动态导入组件，这意味着需要根据文件路径或其他标识符来异步加载组件，比如使用Vue的defineAsyncComponent或者React的lazy。 还需要考虑菜单数据的字段可能与路由配置的字段不一致，比如菜单中的name对应路由的path，或者component需要从另一个字段映射。这时候需要做一些数据转换。 可能的错误情况包括循环引用、路径重复、组件不存在等，需要考虑如何处理这些异常情况，或者是否需要添加错误处理机制。 最后，用户可能需要一个示例代码来理解具体的实现步骤，因此提供一个清晰的代码示例，并解释每个步骤的作用，会很有帮助。同时，生成的相关问题可以帮助用户进一步了解优化方法、动态路由处理或权限控制等扩展内容。</think>### JavaScript将四级树形菜单转为路由树实现方法 #### 核心步骤说明 1. **数据结构定义** 原始菜单数据结构示例： ```javascript const menuData = [{ id: 1, name: '首页', path: '/home', component: 'HomeView', children: [{ id: 11, path: 'dashboard', component: 'Dashboard' }] }]; ``` 2. **递归处理函数** ```javascript function generateRoutes(menuNodes, basePath = '') { return menuNodes.filter(node => node.component).map(node => ({ path: `${basePath}/${node.path}`.replace(/\/+/g, '/'), component: () => import(`@/views/${node.component}.vue`), children: node.children ? generateRoutes(node.children, `${basePath}/${node.path}`) : [] })); } ``` 3. **路径拼接优化** 使用正则表达式处理路径中的重复斜杠： ```javascript path: `${parentPath}/${nodePath}`.replace(/\/+/g, '/') ``` #### 完整实现示例 ```javascript function menuToRoutes(menuData) { const walk = (nodes, parentPath = '') => { return nodes.reduce((routes, node) => { if (!node.component) return routes; const route = { path: [parentPath, node.path] .join('/') .replace(/\/+/g, '/'), name: node.name, meta: { title: node.title }, component: () => import(`@/views/${node.component}`) }; if (node.children) { route.children = walk(node.children, route.path); } return [...routes, route]; }, []); }; return walk(menuData); } // 使用示例 const router = new VueRouter({ routes: menuToRoutes(menuData) }); ``` #### 关键处理逻辑 1. **组件动态导入**：使用Webpack的魔法注释实现代码分割 ```javascript component: () => import(/* webpackChunkName: "home" */ `@/views/${name}`) ``` 2. **权限过滤**：通过meta字段标注路由权限要求 ```javascript meta: { requiresAuth: true, roles: ['admin'] } ``` 3. **空路径处理**：对无实际组件的菜单节点进行过滤 ```javascript if (!node.component) return routes; ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值