vue3+element 动态实现导航

最新推荐文章于 2024-08-20 22:07:03 发布
最新推荐文章于 2024-08-20 22:07:03 发布
阅读量598 收藏
点赞数
分类专栏： vue 文章标签： vue vscode ide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932157/article/details/121486648
版权
这篇博客展示了如何使用Vue.js框架来构建一个包含侧边菜单的页面布局，该菜单根据路由动态显示子菜单项。利用el-menu组件和router-view，实现了菜单与页面内容的联动，同时通过menuSelect方法处理路由跳转。内容涉及到Vue组件、路由器配置以及响应式布局。
摘要由CSDN通过智能技术生成 
<template>
    <div>
        <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">
       <el-menu :default-openeds="['1', '3']"    router>
      <el-subme
最低0.47元/天 解锁文章
你的美，让我痴迷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【vue3+ts后台管理】首页完成
Errol's Blog
08-01 785
首页完成
vue3编程式导航
m0_72919073的博客
11-19 1897
vue3编程式导航及传参方式
vue3 学习笔记17 -- 基于el-menu封装菜单
weixin_46328739的博客
07-23 356
前提条件：组件创建完成。
【Vue3】编程式路由导航
最新发布
又言又语
08-20 342
本文介绍 Vue3 路由编程式导航的用法。编程式路由导航可以通过代码实现页面跳转，与组件（）声明式导航不同。编程式路由导航的灵活度更高。在需要路由导航的组件（本例中的Warn.vue）组件中引入vue-router的useRouter方法；调用获取路由器对象；调用路由器对象的push方法实现路由导航功能，push方法的参数与组件的to属性写法保持一致，即组件的to属性写法同样适用于路由器对象的push方法；本文只展示了路由params传参，query传参写法基本类似。
vue3 引入导航路由
于笨笨的博客
03-23 3108
vue3 引入导航路由 vue中的导航路由可以说是很重要了，感觉是最简单的路由导航相对于传统导入bootstrap 导航路由的完成需要四个文件 App.vue用来挂载显示导航，当路由挂载并且注册成功之后，一定一定要记得在App.vue里面进行进行显示<router-view></router-view>没有这一步操作不会显示正确的结果 index.js是放在router文件下面的路由文件，里面可以放置大量的路由地址routes, const routes = [ { //此
vue+element路由标签使用tag动态显示隐藏以及跳转实现(使用vuex)
Eleuuuuy的博客
01-27 2457
效果图： 点击tab可以跳转到导航对应页面。 代码： <store> state:{ currentMenu:null, menu:[], tabsList:[ { path:'/', name:'首页', icon:'home' } ] }, mutations:{ //选择标签 selectMenu(state,val){ if(val.path === '/'){ this.currentMenu = null; } else { s
基于 vue3 + vite + element plus + avue3 + vue-router + vuex，适配手机、平
06-08
在Vue3中，Vue Router也进行了相应的更新，支持新的特性，如动态路由匹配、命名视图、路由元信息等，使得页面跳转更加灵活。 Vuex是Vue的状态管理模式及存储库，用于集中管理组件之间的共享状态。在大型项目中，...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
使用vue3+element-ui plus 快速构建后台管理模板
10-17
Vue3和Element UI Plus是现代前端开发中的两个热门工具，它们结合在一起可以高效地搭建功能丰富的后台管理系统。Vue3作为Vue.js的最新版本，引入了许多性能优化和开发体验改进的特性，而Element UI Plus则是基于...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。 首先，Vue3...
在 vue3 中使用高德地图
weixin_64684095的博客
04-23 7022
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
vue小实例——导航目录
weixin_46920847的博客
07-18 767
首先，看效果：（此实例不使用路由形式） 思路历程： 按照往常不使用vue的方式，这些数据是需要全部写出来的才可以展示在页面，所以我们需要转换以下思想。因为vue是把数据和页面分离开，所以将数据抽取出来存放在JS文件夹中，HTML展示数据的方式就变成了 {{}} / v-text / v-html 形式。 导航栏名称可使用数组的形式封装，但是后期可能不止有名称，还可能会有子导航栏，故建议使用对象数组的形式。 在点击导航栏的时候，导航栏的颜色以及↑↓符号有所改变，可使用flag标识符，v-bind绑定一个类
vue3+Element采用递归调用封装导航栏
weixin_64925940的博客
06-19 1231
vue3+Element采用递归调用封装导航栏
突破编程_前端_JS编程实例（目录导航）
突破编程
03-10 1387
JS编程实例：目录导航
vue 根据菜单自动生成路由（动态配置路由）
东扯葫芦西扯瓜——前端小菜鸟的博客
11-24 5214
vue 根据菜单自动生成路由（动态配置前端路由）1.创建项目2.新建文件3.到main.js中4.先把菜单组件写好，到menu.vue中5.注册全局组件6.到router文件夹写好路由模块6.1 base-router.js中写好我们需要的固定的路由6.2 lm-router.js中写动态配置路由的方法6.3 index.js中写路由入口7.容器页和加载页7.1 layout.vue7.2 loading.vue8.写筛选菜单和路由的方法9. 登录成功后生成路由 在需要权限控制的页面，往往存在根据用户来显示
使用vuepress搭建文档站点
weixin_42349568的博客
09-22 2419
后续的部署测试啥的，比较常规，就不写了。这时候，无论点击导航栏还是侧边栏。都会报404，这是因为生成路由了，但是没有对应的页面（vuepress下每个md文件就是一个页面）。到这一步，已经可以开始写markdown技术文档了，但是每次新增，都需要手动新增侧边栏的配置，这样一点也不机智，我希望它能够自动生成侧边栏。为了简化开发成本，我们可以直接使用主题，这里我用的是：[vuepress theme vdoing](导航栏可能包含你的页面标题、搜索框、 导航栏链接、多语言切换、仓库链接，它们均取决于你的配置。
《vue3+ts+element-plus 后台管理系统系列二》之布局
星宇大前端
01-30 5295
布局 本页面部分内容来源于引用vue-element-admin-site 页面整体布局是一个产品最外层的框架结构，往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目，先要了解它的基础布局。 Layout @/layout vue3-composition-admin 中大部分页面都是基于这个 layout 的，除了个别页面如：login , 404, 401 等页面没有使用该layout。如果你想在一个项目中有多种不同的layout也是很方便的，只要在一级路由那里选择不同的layou
大伟使用vue+element组一个导航栏
m0_46426259的博客
12-08 152
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script> <div id="app"> <el-row class="tac"> <el-col :span="12"> <h5>自定义颜色</h5> &l
vue3+element侧边栏导航循环遍历icon
06-07
在Vue3中使用Element UI实现侧边栏导航循环遍历icon的实现方法与上面所示的基本类似，只是需要使用Element UI提供的icon组件。以下是一个示例代码： ```html <template> <div> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu-item v-for="(item, index) in navItems" :key="index" :index="index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </el-menu> </div> </template> <script> export default { data() { return { activeIndex: "0", // 默认选中项的索引 navItems: [ { title: "Home", link: "/", icon: "el-icon-s-home" // Element UI提供的icon类名 }, { title: "About", link: "/about", icon: "el-icon-info" }, { title: "Contact", link: "/contact", icon: "el-icon-message" }, // 循环遍历的数据可以自行添加或从后端API获取 ] }; }, methods: { handleSelect(index) { this.activeIndex = index; } } }; </script> ``` 在上面的代码中，`navItems`数组中存储了侧边栏导航的数据，包括每个导航项的标题、链接和图标类名。使用`v-for`指令在模板中循环遍历这些导航项，并将每个图标的类名绑定到`<i>`元素的`class`属性上，以显示相应的图标。同时，使用Element UI提供的`el-menu`和`el-menu-item`组件实现了导航菜单的基本结构，并使用`default-active`属性指定默认选中项的索引。在`handleSelect`方法中，我们可以监听导航菜单的`select`事件，更新选中项的索引并执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美，让我痴迷

你的好，我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值