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

最新推荐文章于 2023-08-13 09:28:11 发布
最新推荐文章于 2023-08-13 09:28:11 发布
阅读量846 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 问题 vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/v_loading/article/details/122377353
本文介绍如何将Vue-Router的一级目录转换为二级目录访问。只需在vue.config.js中进行简单配置，即可实现二级目录的效果，适用于前端开发者优化项目路由结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

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

实现

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 9201
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9368
未完
nginx部署vue项目_vue 多项目部署---二级目录
weixin_39797780的博客
12-05 738
新项目：同一域名下部署多个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 471
前情回顾 通过上一章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（九）再把内容页面渲染出来》的学习，我们其实已经完成了我们设想的项目的开发。但是，我们做好的这套东西，是基于 nodejs 开发的。而我们最终希望，我们开发的项目，生成好一堆文件，然后随便通过任何一个 http 服务就能跑起来，也就是，还原成我们熟悉的 html+css+js 的模式。
vue-router + el-menu动态渲染二级菜单
qq_40128591的博客
10-31 1241
vue-router + el-menu动态渲染二级菜单
vue 动态css_vue--安装插件，写路由
weixin_39620279的博客
12-12 178
1、安装vue-router插件npm install vue-router --save其中'--save'是为了保存在package.json配置中，写在配置文件中下次install的时候，依赖包就会按照json文件中的配置项进行安装2、在src中新建一个配置动态路由的js文件，js文件主要配置对应的路径跳转到对应的组件页面，所以要先导入对应的组件，然后将path和component一一对应3...
用vue-router实现二级菜单内容的转换
傲娇的黄同学的博客
11-30 1万+
用vue-router实现二级菜单内容的转换
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 7496
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
vue3知识点5.2项目路由router教程 vue项目引入路由 搭建路由 嵌套路由 路由传参 导航守卫 命名视图 重定向 别名
yangyangdt的博客
12-29 2648
项目引入路由，路由介绍，项目搭建路由，嵌套路由，...导航卫士，命名视图，重定向...
Vue 人资 实战篇一 vue-element-admin学习，项目初始化，sass运用
m0_55170432的博客
05-31 1069
人力资源的环境搭建 1.0 vue-element-admin的了解和介绍 vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/) 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 是一个后台集成方案, 集成了PC项目中很多的业
如何实现Vue路由的二级菜单
最新发布
青春木鱼的博客
08-13 4939
当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。
【VUE】Vue2菜单搜索并跳转指定页面
SZnAl的博客
03-28 2993
有时候后台管理系统复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。菜单目录支持搜索并且可直接跳转便可以达到以上诉求。
vue二级路由跳转
qq_40664253的博客
07-30 6936
主页跳转到我的页面（My.vue），‘我的页面’又有很多子页面，点击子页面显示对应内容。 方法一： 在router/index.js里： 引入组件（路径因人而异）： 然后进行配置（其余子组件同orders写法）： 在父组件(此时二级路由的父组件为My.vue)的根标签里写出口<router-view></router-view> 在父组件里，我是用li标签遍历 ...
vue三级路由内容在二级路由中展示(平级展示)，并保存选中状态。(Vue-router 如何在嵌套路由的同时做多级菜单。)
CCKing7的博客
03-02 4171
1.Vue-router 如何在嵌套路由的同时做多级菜单。 2.vue三级路由内容在二级路由中展示，并保存选中状态。 3.vue路由同级展示。
vue 关于路由和导航守卫
m0_61472704的博客
06-15 735
vue路由与导航守卫
Vue Router4路由
xwnxwn的专栏
04-16 1590
原文链接：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二级菜单添加链接+点击二级菜单渲染页面
lucky的专栏
04-23 2310
menu加router 二级菜单加路径
Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
热门推荐
无解的菜鸟晖 的博客
12-02 4万+
一、目的 后台管理系统页面的整体结构如图： 实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图： 2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位和大小设定。 使用 el-menu 组件的 mode ...
react 中子路由（route）或二级路由如何配置？
Mr.Su,Glad to see you！
01-14 4430
比如有A框架，\B\C\D（如下图）三个模块，如下图，整体页面我们叫A，A左侧菜单有个菜单是跳到B（除了左侧蓝色的导航之外整个右边我们叫B）、而B目录下又有C或者D（就是右边第三个模块）内容区，如何来写route： 首先要配置主路由，该引入的东西引入一下（我用了懒加载）： import { HashRouter, Switch, Route, Redirect } from 'react-router-dom' // 懒加载过渡 function ImportCmpLoading() { re
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值