介绍

Vue Router Tab 是基于 Vue.js 和 Vue Router 的路由页签组件，用来实现多页签页面的管理。
官网
演示

包含的功能

✅ 响应路由变化来打开或切换页签

✅ 页签过多鼠标滚轮滚动

✅ 页签拖拽排序

✅ 支持页签打开、切换、关闭、刷新、重置等操作

✅ Iframe 页签嵌入外部网站

✅ 组件个性化设置：过渡效果、自定义插槽、页签右键菜单

✅ 多语言支持

✅ 缓存控制：页签规则、页签是否缓存、最大缓存数、是否复用组件等

✅ 动态页签信息：标题、图标、提示

✅ 初始页签数据，进入页面时默认显示的页签

✅ 页签刷新还原，在浏览器刷新后恢复页签

✅ 页面离开前确认

✅ Nuxt 支持

安装

推荐使用 yarn：

yarn add vue-router-tab

你也可以用 npm：

npm i vue-router-tab -S

入门

引入组件

示例：

main.js 入口文件

// router-tab 组件依赖 vue 和 vue-router
import Vue from 'vue'
import Router from 'vue-router'// 引入组件和样式
import RouterTab from 'vue-router-tab'
import 'vue-router-tab/dist/lib/vue-router-tab.css'import App from './App.vue'
import router from './router'Vue.config.productionTip = false
Vue.use(RouterTab)new Vue({router,render: h => h(App)
}).$mount('#app')

应用组件

示例
components/layout/Frame.vue 布局框架

<template><div class="app-header">头部</div><div class="app-body"><div class="app-side">侧边栏</div><router-tab /></div>
</template>

路由配置

1.引入 RouterTab 内置路由以支持 Iframe 页签
2.通过路由的 meta 信息，来设置页签的标题、图标、提示和路由页签规则

- 注意

RouterTab 所在父路由必须提供能访问的默认路由，您可以通过两种方式实现：

配置 redirect 重定向到子路由
默认访问路由与父路由路径保持一致。(示例采用当前方案)
示例router.js 路由

import Vue from 'vue'
import Router from 'vue-router'// RouterTab 内置路由
import { RouterTabRoutes } from 'vue-router-tab'// 引入布局框架组件
import Frame from './components/layout/Frame.vue'// 异步加载页面组件
const importPage = view => () =>import(/* webpackChunkName: "p-[request]" */ `./views/${view}.vue`)Vue.use(Router)export default new Router({routes: [{path: '/',// 父路由组件内必须包含 <router-tab>component: Frame,// 子路由里配置需要通过页签打开的页面路由children: [// 引入 RouterTab 内置路由以支持 Iframe 页签...RouterTabRoutes,{path: '/', // 默认页和父级路由一致name: 'Home',component: importPage('Home'),meta: {title: '首页' // 页签标题}},{path: '/page/:id',component: importPage('Page'),meta: {title: '页面', // 页签标题icon: 'icon-user', // 页签图标，可选tabClass: 'custom-tab', // 自定义页签 class，可选tips: '这是一个页面', // 页签提示，可选，如未设置则跟 title 一致key: 'path', // 路由打开页签规则，可选closable: false // 页签是否允许关闭，默认 `true`}},{path: '/404',component: importPage('404'),meta: {title: '找不到页面',icon: 'icon-page'}}]},{// 其他路由 404path: '*',redirect: '/404'}]
})

Vue Router Tab相关推荐

【Vue实用功能】Vue实现tab页多页面切换
Vue实现tab页多页面切换实现路由发生变化时,新增一个tab标签页,点击其他标签时切换到对应的页面,刷新网页同时保留状态这里就直接说它实现的代码就OK!!! VueX记录下每次新增后的tab标签 ...
VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
vue router html,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...
Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
vue router html后缀,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...
vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...

Vue Router Tab

介绍

包含的功能

安装

入门

引入组件

应用组件

路由配置

Vue Router Tab相关推荐

最新文章

热门文章