大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
介绍
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'
}
}
]
},
{
// 其他路由 404
path: '*',
redirect: '/404'
}
]
})
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/157725.html原文链接：https://javaforall.net
