使用vue做一个后台管理系统，点击左侧，右侧出现带有关闭标签的按钮和内容

luoerdaixin

171812

发布于
2019-03-02

图片描述

类似图片，但是是用vue去完成，求大神们指导！因为确实没有思路，不知道是用bus做还是用什么更好一些，

vue.js javascript

阅读 6.7k

6 个回答

得票最新

krun

6.9k1726

发布于
2019-03-02

vuex 维护一个 openedMenu 数组用于渲染已打开的菜单列表

点击左侧菜单 -> 切换路由 -> 路由守卫 -> 检测当前路由是否已加入 `openedMenu`
 -> {
    -(已加入)->  继续执行
    -(未加入)->  加入到 `openedMenu` 中
 } -> 首页根据当前路由切换 `Tabs` 中处于激活的 `Pane`

点击某个 `Pane` 的关闭按钮 -> 在 `openedMenu` 中移除该路由地址并计算该 `Pane` 是否有后继 `Pane`
 -> {
   -(有)-> 切换路由至该 `Pane` 对应的路由地址
   -(无)-> 检测 `openedMenu` 中 `Pane` 的数量是否大于 0
   -> {
     -(大于0)-> 切换路由至 `openedMenu` 中第一个 `Pane` 对应的路由地址
     -(等于0)-> 在 `openedMenu` 中加入首页对应的路由地址并切换
   }
 }