├── .gitignore ├── src ├── Images │ ├── logo.png │ └── default.jpg ├── Styles │ ├── iconfont │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.css │ ├── common.css │ └── cover.css ├── Store │ └── index.js ├── Views │ ├── index.vue │ ├── hello2.vue │ ├── hello3.vue │ ├── home.vue │ └── hello1.vue ├── Frame │ ├── MainFrame.js │ ├── MainConf.js │ ├── MainStore.js │ └── MainFrame.vue └── Router │ ├── TabRoute.js │ └── RouterMethods.js ├── .babelrc ├── index.html ├── package.json ├── Introduction.md ├── webpack.config.js ├── webpack.config.prod.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .git 3 | .node_modules 4 | node_modules 5 | dist -------------------------------------------------------------------------------- /src/Images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noahlam/vue-multi-tab/HEAD/src/Images/logo.png -------------------------------------------------------------------------------- /src/Images/default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noahlam/vue-multi-tab/HEAD/src/Images/default.jpg -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["env", { "modules": false }]], 3 | "plugins": ["transform-runtime"] 4 | } -------------------------------------------------------------------------------- /src/Styles/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noahlam/vue-multi-tab/HEAD/src/Styles/iconfont/iconfont.eot -------------------------------------------------------------------------------- /src/Styles/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noahlam/vue-multi-tab/HEAD/src/Styles/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /src/Styles/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noahlam/vue-multi-tab/HEAD/src/Styles/iconfont/iconfont.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/Store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import MainStore from '@/Frame/MainStore' 4 | 5 | Vue.use(Vuex) 6 | 7 | export default new Vuex.Store({ 8 | // 模块化 store, 把需要 store 的数据导入到这里即可 9 | // store 格式参考 /src/Frame/MainStore.js 10 | modules: { 11 | MainStore, 12 | } 13 | }) 14 | -------------------------------------------------------------------------------- /src/Views/index.vue: -------------------------------------------------------------------------------- 1 | 2 |5 | 接收一个 menuId 作为参数,对应要关闭的 tab 的 menuId. 6 | 如果 menuId 没传,或者传的 menuId 在打开的 tab 列表里面没找到对应的.则不做任何操作. 7 |8 |
6 | 接收一个正整数作为后退的步数(可选,默认是1) 7 |8 |
5 | 如果当前页签未打开过,则打开一个新的页签
6 | 如果页签已存在,则跳转到当前页签.
7 | 接收一个对象做参数,格式如下:
8 |
9 | {
10 | title: '子菜单1-2',
11 | component: 'index',
12 | menuId: '1-2'
13 | },
14 |
15 | 这个格式,其实就是菜单配置里的格式,这么设计,是方便直接在菜单列表上打开当前菜单
16 |
17 | <el-menu-item-group>
18 | <el-menu-item v-for="(item,index) in menuList"
19 | :key="index"
20 |
21 | @click="$tab.open(item)"
22 |
23 | :index="item.menuId">
24 | { {item.title} }
25 | </el-menu-item>
26 | </el-menu-item-group>
27 |
28 |
8 | 类似 vue 的 this.$router.push,可以在当前页签下跳转到另一个组件,且可以带参数
9 |
10 | 参数说明
11 | 第一个参数【必选】 可以是字符串,也可以是对象
12 | 1.字符串
13 | 1.1 字符串不带参数,就是一个组件名。打开对应的组件
14 | 1.2 字符串后带查询参数,会自动解析,并在目标组件可以通过 this.$tab.query() 获取
15 | 需要注意的是 query() 是一个函数,这个跟vue-router不同,不过返回的数据格式跟vue一样
16 |
17 | 2.对象 第一个参数是一个对象的话,格式如下
18 | {
19 | path:'组件名称', // 必选
20 | query: {} // 可选,Object类型,要带的查询参数,获取方式同上
21 | }
22 |
23 | 第一个参数【可选】,是一个对象
24 | 也是查询参数,这个参数会上面参数合并,如果刚好有同名的参数,则会覆盖上面的参数
25 | 理论上,push()方法是可以在全局的任何地方使用,不过需要注意的是不管何时,在哪里push,push的目标始终是当前激活的那个tab.
26 |
27 | 32 | 接收一个正整数作为后退的步数(可选,默认是1) 33 |34 |
10 |
50 | 张三丰
51 |
52 |
53 |