Vue.js tab components, based on Vue Router

Usage no npm install needed!

<script type="module">
  import utryRouterTab from 'https://cdn.skypack.dev/utry-router-tab';


English | 简体中文

感谢作者 碧海幽虹 因为涉及到有些内容需要修改,需要上传至npm,因此改名为 utry-router-tab

vue-router-tab logo

Build vue vue-router GitHub last commit

Version Downloads npm bundle size gzip size: css License

Vue Router Tab

A tab router component based on Vue Router.

📌 Features

✅ Open or switch to tabs responding to route change

✅ Tabs mouse wheel scrolling

✅ Tabs drag sort

Tab Operations: open, switch, close, refresh, reset

Iframe tab: for external website

✅ Customized:transition, slot, contextmenu


Cache control: tab rules, cacheable, maximum keep alive, reusable

Dynamic Tab Info: title, icon, tooltip

Initial Tabs: initially opened tabs when entering page

Restore Tabs: reopen tabs after browser refresh

Page Leave Confirm

Nuxt Support

🔗 Links

🛠 Installation

📝 Documentation (Gitee)

📺 Online Demo (Gitee)

👨‍💻 Sample Project

📃 Changelog

🏷 NPM Task

Task Command Description
Lib build npm run lib:build
Lib build and generate report npm run lib:build:report
Lib publish npm run lib:publish change version in package.json
Demo develop npm run demo:dev
Demo build npm run demo:build
Document develop npm run docs:dev
Document build npm run docs:build
Code format check npm run lint
Code format check and auto fix npm run lint:fix
Commit code npm run commit



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