使用vue.js构建后台管理系统，如何实现类似easyUI多窗口的布局？

Question

如何使用vue.js 构建类似这样的后台管理系统，
主要是有不同的标签页面，可以关闭，传统的方式是iframe实现，
请问 使用vue.js 如何构建？是否使用iframe？
如果使用iframe如何构建？
如果不使用iframe，vue.js 如何构建实例？是一个面多个实例，还是组件之间的通信？
希望有大神能够提供一个大概的思路

Answer 1

用vue框架无需使用iframe，
结合vue-router相关知识点，
左侧是一个固定不变的导航，
顶上我的桌面这一行也可以看成固定不变的导航，只不过它的条数是变动的，可通过重新打开页面，或者点击关闭来增加或减少条数，
中间部分根据页面变化不多说。
上一个例子，主要是主页面部分：

<template>
  <div id="app">
      <div class="header">头部</div>
      <div class="container">
        <Sidemenu>左侧导航</Sidemenu>
        <Submenu>顶部导航</Submenu>
        <div class="page">
            <router-view></router-view>
        </div>
      </div>
      <div class="footer">
          &copy;底部
      </div>
  </div>
</template>

顶部导航部分内容需要单独维护，上面说过，它是可变的。

Answer 2

这不就是路由的组织而已吗..

Answer 3

最近在整理一个这种后台，vue-router实现的，写完了发布出来

Answer 4

自己整出来了 放在github上了，我使用的是iview UI
跟用什么UI没关系其实就是核心还是路由，有帮助的话给个start

Answer 5

我用的是顶部tabs单独一个组件, 用vuex, 在state里面增加一个数组存放打开的路由, 和一个对象, 存放当前路由,
state:

state: {
    user: JSON.parse(window.sessionStorage.getItem('user')) || {},
    userinfo: {},
    options: [],  // 顶部tab
    activeRoute: {},
    TokenID: ''
  },

mutations

 /*route config*/
    AddOption: (state, route) => {

      let _names = state.options.map (i => i.name)
      if ( !_names.find(i => i === route.name)
          && route.name !== 'login'
          && route.name !== 'ErrorCompoent') {
            state.options.push(route)
      }
    },
    RemoveOption: (state, route) => {
      let _item = state.options.find( i => i.name === route.name)
      state.options.splice(state.options.indexOf(_item), 1)
    },
    ActiveOption: (state, route) => {
      if ( route.name !== 'login' && route.name !== 'ErrorCompoent' ) {
        state.activeRoute = route
      }
    }
    /*end*/

actions:

 AddOption: ({commit}, route) => {
      commit('AddOption', route)
    },
    RemoveOption: ({commit}, route) => {
      commit('RemoveOption', route)
    },
    ActiveOption: ({commit}, route) => {
      commit('ActiveOption', route)
    }

大概就是这样, 业务相关的action不方便贴出来
router afterEeah钩子

router.afterEach( route => {
  store.dispatch('ActiveOption', route)
  store.dispatch('AddOption', route)
  console.log('afterEach',route)
})

组件

  <ul class="tabs">
    <li class="tabs-item"
      v-for="(item,index) in options"
      :key='index'
      :class="{active: activeName === item.path }"
      @click.stop='onTabClick(item)'>
      &nbsp;
      {{item.name}}
      <i style="color:#ccc"
        class="el-icon-circle-cross"
        @click.stop='onDelClick(index,item)'>
      </i>
    </li>
  </ul>

methods, 就是点击tab跳转路由, 点击icon关闭移除一个tab, 路由跳到最后一个tab

 onTabClick (item) {
      // console.log(item.path) // 点击切换
      let path = item.path
      this.activeName = item.path
      this.$router.push({path, query: {t: +new Date()}}) // 点击刷新
    },
    onDelClick (index,name){
      // console.log(index, name) // 点击移除
      if (this.$store.state.options.length !== 1) {
        this.RemoveOption(name)
        let routeList = this.$store.state.options.slice()
        this.$router.push(routeList.pop().path)
      }

以上方法缺点是tab页只能是路由中写好的, 关闭一个tab后路由只会跳到当前最后一个, 比如打开四个, 关闭第二个, 就跳到第四个路由了, 虽然这个行为能改掉.