Vue Router Tab

介绍

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'
    }
  ]
})
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值