Vue基于Element-UI实现侧导航栏和面包屑联动

记录踩坑的两个地方。 

两个都是关于侧导航栏的部分,涉及到router-view和index.js部分

一、index.js部分

        各位在写侧导航栏时一定遇到过多级导航栏的情况,如图

 系统管理下有多个二级导航,大家在写路由的时候肯定也遇到路由路径的问题,犯的错误之一:一直牢记着在写子路由的时候不能加“/”的知识点,

 其实,这边记住:一定要加斜杠路径!!

对应的地址如下:

 在这个页面中反而加不加斜杠都无所谓,都行,本人亲测都可以。在router/index.js中如果不加的话,就会导致页面出现空白

这是踩坑一。

二、router-view部分

这部分说实话踩坑的人应该不多,本人思索良久才知道问题出在哪里

还是这张图:

 在这层的导航,按照我们的逻辑,这只是侧导航栏的一个下拉的动作,为什么要添加一个component呢?我也查了很多资料,发现网上在这部分叙述都是一笔带过甚至提都不提。

这个component如果不写,同样会导致页面出现空白的问题,因为这部分太重要了!!

我们在写到el-container的时候,都知道会在这边放一个router-view :

 同时在App.vue中配置一下:

 同样的道理,我想很久才明白类似的道理,既然这边会放,这二级导航也应该要放啊,路由里面配了子路由,那一样的导航不是一样的道理么,所以,在system.vue中,内容是和App.vue中应该是一样的,所以:在system.vue中的配置如下

 这样,面包屑和侧导航栏就能形成联动了,搞定!

多提一嘴,Element-UI在el-menu 中有个router的属性,这个很方便,大家记得要用,加了这个属性,它会将el-menu-item中的index的值作为path进行路由跳转,这个就是index的用法。

 

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Vue 3和Element Plus提供了一种简单的方法来实现边菜单栏与标签页之间的联动。下面是一个基本示例,演示了如何实现这一功能: 1. 首先,确保你已经安装了Vue 3和Element Plus,并在项目引入它们。 2. 创建一个边菜单栏组件(SideMenu),用于展示菜单项。这个组件可以使用Element Plus的Menu组件来创建。 ```html <template> <el-menu :default-active="activeMenu" @select="handleMenuSelect"> <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path"> {{ item.name }} </el-menu-item> </el-menu> </template> <script> export default { data() { return { activeMenu: '', // 当前选的菜单项 menuItems: [ { name: '菜单1', path: '/menu1' }, { name: '菜单2', path: '/menu2' }, // 其他菜单项... ] } }, methods: { handleMenuSelect(index) { this.activeMenu = index; // 更新选的菜单项 this.$router.push(index); // 导航到对应的路由 } } } </script> ``` 3. 创建一个标签页组件(Tabs),用于展示已打开的页面。这个组件可以使用Element Plus的Tabs组件来创建。 ```html <template> <el-tabs v-model="activeTab" type="border-card" @tab-remove="handleTabRemove"> <el-tab-pane v-for="tab in openedTabs" :key="tab.path" :label="tab.name" :name="tab.path"> <!-- 页面内容 --> </el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeTab: '', // 当前选的标签页 openedTabs: [] // 已打开的标签页 } }, methods: { addTab(tab) { const index = this.openedTabs.findIndex(item => item.path === tab.path); if (index === -1) { this.openedTabs.push(tab); } this.activeTab = tab.path; // 选新打开的标签页 }, removeTab(targetName) { const index = this.openedTabs.findIndex(item => item.path === targetName); if (index !== -1) { this.openedTabs.splice(index, 1); } }, handleTabRemove(targetName) { this.removeTab(targetName); if (targetName === this.activeTab) { this.activeTab = this.openedTabs[this.openedTabs.length - 1].path; } } } } </script> ``` 4. 在你的主页面,使用以上两个组件来实现联动效果。 ```html <template> <div> <side-menu></side-menu> <tabs></tabs> </div> </template> <script> import SideMenu from './SideMenu.vue'; import Tabs from './Tabs.vue'; export default { components: { SideMenu, Tabs } } </script> ``` 在这个例子,当你点击边菜单栏的菜单项时,会更新选的菜单项,并导航到对应的路由。同时,会在标签页打开一个新的标签页。如果你点击已打开的标签页的关闭按钮,会关闭该标签页并自动选最后一个打开的标签页。 这样就实现边菜单栏与标签页的联动效果。你可以根据自己的需求进行定制和扩展。希望对你有所帮助!
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值