Vue3实现动态菜单功能

于 2024-10-01 07:01:06 发布
阅读量16 收藏
点赞数 1
分类专栏： Vue知识学习及项目开发实践 文章标签： Vue3 动态菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjzhang75/article/details/142642749
版权

文章目录

  • 0.效果演示
  • 1.搭建Vue3项目
    • 1.1 vite 脚手架创建 Vue3 项目
    • 1.2 设置文件别名
    • 1.3 安装配置 element-plus
    • 1.4 安装配置路由
  • 2.登录页面
  • 3.后台管理页面
    • 3.1 搭建后台框架
    • 3.2 左侧菜单栏
    • 3.3 header 用户信息
    • 3.4 主要内容
    • 3.5 footer
  • 4.配置静态路由
  • 5.记录激活菜单
    • 5.1 el-menu 绑定 default-active 属性
    • 5.2 菜单添加点击事件
    • 5.3 初始化激活菜单
  • 6.动态路由
    • 6.1 登录成功存储数据
    • 6.2 路由导航守卫动态配置路由
    • 6.3 解决刷新页面，页面空白的问题
  • 7.完整代码

主要步骤：
在这里插入图片描述

0.效果演示

在这里插入图片描述

1.搭建Vue3项目

1.1 vite 脚手架创建 Vue3 项目

npm create vite@latest vue3-zhifou -- --template vue

代码编辑器进入刚创建的项目文件夹里面

#安装依赖
 npm
了解本专栏 订阅专栏 解锁全文 超级会员免费看
bjzhang75
关注
专栏目录
订阅专栏
vue实现伸缩菜单功能
蜗牛~~
12-06 3158
先看效果： 点击图片按钮可调整菜单宽度 伸缩后 页面结构一共分为三部分，加上一个伸缩按钮，在你的项目对应的部分都加上class名。 我这里定义的分别是box、left、mid、resize(按钮类名) html 页面结构划分完成之后，完善一下样式（直接复制，菜单类名换成你的） /*拖拽区div样式*/ .resize { cursor: col-resize; position: relative; // top: 45%; top: 400px;..
Vue实现自定义下拉菜单功能
10-18
Vue实现自定义下拉菜单功能涉及的知识点主要包括Vue的组件系统以及基础的模板语法、数据绑定和事件处理。 首先，要实现自定义下拉菜单功能，需要熟悉Vue的组件化开发方式。组件化可以让你将界面分割成独立的可复用...
vue3实现右键自定义菜单栏功能
qq_68155756的博客
03-21 998
vue3实现右键自定义菜单栏功能
Vue 中实现动态右键菜单
weixin_71329368的博客
07-05 1118
实现一个动态右键菜单。这个菜单能够根据用户的点击位置动态调整其显示位置，确保菜单始终在浏览器窗口的可视区域内。这样的实现可以提升用户体验，使应用更加友好和易用。
VUE3+el 实现动态菜单页面跳转
qq_58734875的博客
12-07 1574
在APP.vue页面中(根据你的菜单在哪个位置就去哪个页面)我这里是动态跟静态都有写，如果只有动态可以进行对应的修改。注意，你遍历的路由页面必需都有，否则会解析错误。3.接下来是动态路由的配置。
vue3实现动态菜单和动态路由和刷新后白屏处理
bu_xiang_tutou的博客
03-12 6987
项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。
Vue项目实现动态路由和动态导航菜单栏
qq_42797527的博客
11-30 1689
用于前端存储数据，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。Vuex中的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，相应的组件也会得到更新。而全局对象的状态存储是静态的，无法自动更新组件中的状态。根据后端返回的用户的菜单地址进行处理拼装成路由格式，存储到vuex中，并添加到路由里面，若vuex中有用户路由数据，直接放行。2每次路由跳转会通过permission.js进行判断和加载，若vuex中无用户路由数据则请求后端，
Vue3 中如何加载动态菜单？
江南一点雨的专栏
07-20 3805
这两篇文章主要是和大家说明了后端如何根据当前登录用户，动态生成一个菜单JSON。那么现在的问题就是，当前端收到后端返回来的菜单JSON之后，该如何将之渲染出来？这就是我们目前所面临的问题了。TienChin项目基于RuoYi脚手架来完成，所以本文的分析你也可以看作是对RuoYi-Vue3项目的分析。...
Vue实战（一）：实现动态菜单
阿标的博客
02-07 2198
实现动态菜单
Django Vue实现动态菜单、动态权限
haeasringnar的博客
07-27 4723
随着前后端分离架构的流行，在 web 应用中，RESTful API 几乎已经成为了开发者主要选择，它使得客户端和服务端不需要保存对方的详细信息，也就是无状态性，但是这样在项目中需要动态菜单和动态权限就困难起来，本场Chat就是为大家提供一种思路来解决实际项目中如何实现动态菜单和权限。 因为 RESTful API 通常是无状态性，服务器怎么样才能知道用户已经登录呢？这个时候常用的做法就是每个请求...
vue3+element-plus 实现动态菜单和动态路由的渲染
gt8011的博客
07-23 2562
这个组件通过 Vue Router 的useRouter钩子获取当前路由的配置信息，并根据这些信息动态生成菜单项。使用computed属性来区分哪些路由有子菜单，哪些没有，然后相应地渲染或。点击菜单项时，使用方法来改变页面的路由，实现导航功能。并通过useRoute钩子获取当前激活的路由，然后设置activeMenu来决定哪个菜单项应该处于激活状态。
原生Vue 实现右键菜单组件功能
10-15
总之，原生Vue实现的右键菜单组件提供了高度的定制性和灵活性，通过监听事件、定义菜单结构和处理点击事件，可以轻松实现这一功能。通过这种方式，你可以在不引入额外依赖的情况下，为Vue应用添加丰富的交互体验。
jdk1.8+vue elementui实现多级菜单功能
10-14
总结来说，实现JDK 1.8+Vue ElementUI的多级菜单功能需要结合前后端的工作。后端使用Java 1.8的Stream API和Lambda表达式构建树形结构数据，前端利用Vue.js的响应式特性和Element UI的`el-menu`组件渲染菜单。这样的...
vue+iview框架实现左侧动态菜单功能的示例代码
10-15
本文将重点介绍如何使用Vue.js框架和iView UI组件库来实现左侧动态菜单功能。通过介绍示例代码，本文将为读者提供一个详细的实现指南。 ### Vue.js框架基础 Vue.js是一个构建用户界面的渐进式JavaScript框架。它...
vue实现菜单切换功能
12-29
vue实现菜单切换，点击菜单导航切换不同的内容以及为当前点击的选项添加样式，或者组件。 method里：  css: html代码： 学校新闻 <div v-if=Index class=line></div> 就业新闻 <div v-if=Index ==...
基于asp.net的工作流程审批系统设计与实现.docx
09-30
基于asp.net的工作流程审批系统设计与实现.docx
这是各种对象检测数据集的预处理相关工具脚本的集合.zip
最新发布
09-30
这是各种对象检测数据集的预处理相关工具脚本的集合
基于asp.net的驾校理论考试网上模拟系统设计与实现.docx
09-30
基于asp.net的驾校理论考试网上模拟系统设计与实现.docx
基于Python与Shell的阿里巴巴智能运维竞赛排名14设计源码
09-30
该项目为阿里巴巴智能运维竞赛排名14的设计源码，采用Python和Shell两种编程语言，共包含27个文件，包括2个Python脚本、1个PDF文档、1个Markdown文件、1个文本文件、1个CSV文件、1个Shell脚本以及5个特定数据模型文件。该解决方案旨在提升运维效率，适用于大型企业的智能运维场景。
Vue 如何实现动态菜单功能？一看就会！
09-14
Vue 实现动态菜单功能通常会利用组件化思想和数据绑定特性。以下是简单的步骤： 1. **组件设计**： 创建一个 `MenuItem` 组件，它包含一个 `v-if` 或者 `v-show` 来控制显示与否，以及属性如 `isActive` 来标识当前选中状态。 ```html <template> <li :class="{ active: isActive }"> <router-link v-if="to" :to="{ path: to.path }">{{ item.name }}</router-link> <span v-else>{{ item.name }}</span> </li> </template> <script> export default { props: ['item', 'isActive'], }; </script> ``` 2. **数据管理**： 在父组件（通常是 App 或 Layout 组件）中，维护一个数组来表示菜单项，并监听某个状态变化来更新菜单的激活状态。 ```js data() { return { menuItems: [ { name: '首页', to: '/home' }, { name: '设置', to: '/settings' }, ], selectedItem: '', }; }, methods: { toggleItem(item) { this.selectedItem = item ? item : ''; this.menuItems.forEach((itm) => itm.isActive = itm === this.selectedItem); }, }, ``` 3. **初始化状态**： 在 `mounted()` 生命周期钩子中，你可以默认选择第一个菜单项，或者通过其他途径设置初始选中项。 4. **触发事件**： 可以给每个菜单项添加点击事件，将当前点击的菜单项传递给父组件的 `toggleItem` 方法。 ```html <menu-item v-for="(item, index) in menuItems" :key="index" :item="item" @click="toggleItem(item)" /> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值