https://github.com/bhuh12/vue-router-tab

Vue.js tab components, based on Vue Router.
https://github.com/bhuh12/vue-router-tab

admin routertab tabs vue-router-tab

Last synced: about 2 months ago
JSON representation

Vue.js tab components, based on Vue Router.

• Host: GitHub
• URL: https://github.com/bhuh12/vue-router-tab
• Owner: bhuh12
• License: mit
• Created: 2019-02-25T09:19:08.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T03:12:20.000Z (over 1 year ago)
• Last Synced: 2024-03-23T19:06:02.504Z (2 months ago)
• Topics: admin, routertab, tabs, vue-router-tab
• Language: Vue
• Homepage: https://bhuh12.github.io/vue-router-tab/
• Size: 4.1 MB
• Stars: 465
• Watchers: 9
• Forks: 75
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-router-tab - Vue.js tab components, based on Vue Router. (Components & Libraries / UI Components)
• awesome-vue - vue-router-tab - Vue.js tab components, based on Vue Router. (Components & Libraries / UI Components)
• awesome-vue - vue-router-tab - Vue.js tab components, based on Vue Router. (Components & Libraries / UI Components)
• awesome-vue - vue-router-tab - Vue.js tab components, based on Vue Router. (Components & Libraries / UI Components)
• awesome-vue - vue-router-tab - Vue.js tab components, based on Vue Router. (Components & Libraries / UI Components)
• awesome-vue - vue-router-tab - Vue.js tab components, based on Vue Router. (Components & Libraries / UI Components)
• stars - bhuh12/vue-router-tab
• awesome-vue - vue-router-tab - Vue.js tab components, based on Vue Router. (Components & Libraries / UI Components)

README

        
English | [简体中文](README.zh.md)



  

    

  





  

    

  

  

    

  

  

    

  

  

    

  





  

    

  

  

    

  

  

    

  

  

    

  

  

  

    

  



Vue Router Tab


Vue.js tab components, based on Vue Router.

## 📌 Features

✅ Open or switch to tabs responding to route change

✅ Tabs mouse wheel scrolling

✅ Tabs drag sort

✅ [Tab Operations](https://bhuh12.github.io/vue-router-tab/guide/essentials/operate.html): open, switch, close, refresh, reset

✅ [Iframe tab](https://bhuh12.github.io/vue-router-tab/guide/essentials/iframe.html): for external website

✅ Customized：[transition](https://bhuh12.github.io/vue-router-tab/guide/custom/transition.html), [slot](https://bhuh12.github.io/vue-router-tab/guide/custom/slot.html), [contextmenu](https://bhuh12.github.io/vue-router-tab/guide/custom/contextmenu.html)

✅ [I18n](https://bhuh12.github.io/vue-router-tab/guide/custom/i18n.html)

✅ [Keep scroll position](https://bhuh12.github.io/vue-router-tab/guide/custom/scroll.html) after tab switching

✅ [Cache control](https://bhuh12.github.io/vue-router-tab/guide/advanced/cache.html): tab rules, cacheable, maximum keep alive, reusable

✅ [Dynamic Tab Info](https://bhuh12.github.io/vue-router-tab/guide/advanced/dynamic-tab-info.html): title, icon, tooltip

✅ [Initial Tabs](https://bhuh12.github.io/vue-router-tab/guide/advanced/initial-tabs.html): initially opened tabs when entering page

✅ [Restore Tabs](https://bhuh12.github.io/vue-router-tab/guide/advanced/restore.html): reopen tabs after browser refresh

✅ [Page Leave Confirm](https://bhuh12.github.io/vue-router-tab/guide/advanced/page-leave.html)

✅ [Nuxt Support](https://bhuh12.github.io/vue-router-tab/guide/essentials/nuxt.html)

## 🔗 Links

### [🛠 Installation](https://bhuh12.github.io/vue-router-tab/guide/essentials/installation.html)

### [📝 Documentation](https://bhuh12.github.io/vue-router-tab/) ([Gitee](https://bhuh12.gitee.io/vue-router-tab/))

- [Introduction](https://bhuh12.github.io/vue-router-tab/guide/)

- [Getting Started](https://bhuh12.github.io/vue-router-tab/guide/essentials/)

- [API](https://bhuh12.github.io/vue-router-tab/api/)

### [📺 Online Demo](https://bhuh12.github.io/vue-router-tab/demo/) ([Gitee](https://bhuh12.gitee.io/vue-router-tab/demo/))

### [👨‍💻 Sample Project](https://github.com/bhuh12/router-tab-sample)

### [📃 Changelog](https://bhuh12.github.io/vue-router-tab/guide/changelog.html)

---

## 🏷 NPM Task

| Task                          | Command                 | Description                        |

| ----------------------------- | ----------------------- | ---------------------------------- |

| Lib build                     | `yarn lib:build`        |

| Lib build and generate report | `yarn lib:build:report` |

| Lib publish                   | `yarn lib:publish`      | change `version` in `package.json` |

| Demo develop                  | `yarn demo:dev`         |

| Demo build                    | `yarn demo:build`       |

| Document develop              | `yarn docs:dev`         |

| Document build                | `yarn docs:build`       |

| Code format check and fix     | `yarn lint`             |

| Commit code                   | `yarn commit`           |

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019-present, 碧海幽虹