首页 新闻 会员 周边 捐助

Ruoyi-vue 点侧边栏，然后在tab组件新增一个tab并切换是怎么实现的？

0
悬赏园豆：30 [待解决问题]

现在想实现若依在线演示 这样，点击左侧树状菜单栏，然后在右侧tab页打开一个新的窗口，但是我不知道这个如何实现的，我看了ruoyi-vue源码，没找到在哪写的

附：
gitee源码编辑器 ruoyi-vue代码地址，直接切到layout
https://gitee.com/-/ide/project/y_project/RuoYi-Vue/edit/master/-/ruoyi-ui/src/layout/index.vue

echo_lovely的主页 echo_lovely | 小虾三级 | 园豆：1440
提问于：2024-08-21 17:37
< >
分享
所有回答(2)
0

展开是appMain.vue里面的router-view，左侧树和头部在Navbar.vue里面

lannoy | 园豆：221 (菜鸟二级) | 2024-08-22 11:03

他好像是 route-link 配上 route-view 实现的，我也发现了，我现在在尝试实现这个

支持(0) 反对(0) echo_lovely | 园豆：1440 (小虾三级) | 2024-08-22 13:15
0

点击菜单，打开相应的页面吗？

红色的风 | 园豆：78 (初学一级) | 2024-08-22 14:13

嗯，还要实现点击tab也切换到相应的页面

支持(0) 反对(0) echo_lovely | 园豆：1440 (小虾三级) | 2024-08-22 14:16

@echo_lovely:
路由：router
菜单：Layout-components-Sidebar -index.vue
页面容器：Layout-components-AppMain.vue
页面tab：Layout-components-TagView-index.vue
vuex：路由状态管理 store
主要分两块

  1. 路由+菜单+容器，创建路由，解析菜单，使用router-view 展示对应的页面
  2. tab 跳转，在1的基础上添加了一条，通过 store 缓存的数据，进行快捷跳转。本质和菜单是一样的
支持(0) 反对(0) 红色的风 | 园豆：78 (初学一级) | 2024-08-22 14:36

@echo_lovely: 最好是创建一个新的vue工程项目，实现1，在实现2,复制若依的代码了解的比较快，对应的插件使用 可以搜索建议去官网查看文档

支持(0) 反对(0) 红色的风 | 园豆：78 (初学一级) | 2024-08-22 14:38

@红色的风: 我们项目是个单页面项目，主要内容在地图操作的。现在需要做个历史模块，点个按钮在新标签页展示历史模块。然后历史模块长得就和ruoyi很像，所以就开始研究ruoyi这个布局怎么实现的有问题找你，哈哈哈

支持(0) 反对(0) echo_lovely | 园豆：1440 (小虾三级) | 2024-08-22 14:46

@echo_lovely: 搜索 vue3 路由tab,有很多文章的；就是写个组件，放到router-view 上面展示。

支持(0) 反对(0) 红色的风 | 园豆：78 (初学一级) | 2024-08-22 14:49

@红色的风: 我们是vue2的项目，没有做过vue route-link 配上route-view的。我昨天搞了一天，把历史模块框架搭好了，左侧菜单写完了。喵的，现在让我干别的去了，这块先放下

支持(0) 反对(0) echo_lovely | 园豆：1440 (小虾三级) | 2024-08-23 09:16

@echo_lovely: 哪里需要哪里搬

支持(0) 反对(0) 红色的风 | 园豆：78 (初学一级) | 2024-08-23 09:33
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。