# vue-tab

**Repository Path**: alexqdjay/vue-tab

## Basic Information

- **Project Name**: vue-tab
- **Description**: Vue 多tab页框架可替代router, https://github.com/alexqdjay/vue-tabs
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 149
- **Forks**: 36
- **Created**: 2016-11-26
- **Last Updated**: 2024-08-18

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

# Vue-Tabs

[![npm](https://img.shields.io/npm/dw/vue-tabs.svg)]()

> A Vue.js tabs framework replacing the URL-ROUTER for Vue2.0 (多tab页轻型框架，在多tab系统中替代路由)

- [Documentation](./docs)

## Demo  

[查看 DEMO](http://alexqdjay.oschina.io/vue-tab)

![image](./example/assets/shot.png)

## Usage

**Step1. config**

``` JavaScript
// tabs.js
// config
import Hello from './components/Hello'
export default [{
    name: 'home', // name UNIQUE
    title: '首页', // tab's title
    component: Hello
}, {
    name: 'test1',
    title: '测试1',
    component: {
        template: '<h2>测试1</h2>'
    }
}]
```

**Step2. New instance & use**

``` JavaScript
import VueTaber from 'vue-tabs'
import '../vue-tabs.css'
import tabs from './tabs.js'

const vueTaber = new VueTaber({
    tabs
})

Vue.use(VueTaber)
new Vue({
    el: '#app',
    taber: vueTaber,
    template: '<App/>',
    components: {
        App
    }
})

```

**Step3. Html Element**

``` html
<div id="app">
<vue-tabs></vue-tabs>
</div>
```

**Step4. Use api to open a tab**

``` JavaScript
this.$taber.open({
    name: item.name
})
```

## Contributing

**[Contributing](./.github/CONTRIBUTING.md)**