Vue Router Tab「建议收藏」

Vue Router Tab「建议收藏」介绍VueRouterTab是基于Vue.js和VueRouter的路由页签组件,用来实现多页签页面的管理。官网演示包含的功能✅响应路由变化来打开或切换页签✅页签过多鼠标滚轮滚动✅页签拖拽排序✅支持页签打开、切换、关闭、刷新、重置等操作✅Iframe页签嵌入外部网站✅组件个性化设置:过渡效果、自定义插槽、页签右键菜单✅多语言支持✅缓存控制:页签规则、页签是否缓存、最大缓存数、是否复用组件等✅动态页签信息:标题、图标、提示✅初始页签数据,进入页

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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'
    }
  ]
})
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157725.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 什么是软连接,软连接的作用[通俗易懂]

    什么是软连接,软连接的作用[通俗易懂]什么是软连接,其实就是别名,简单的理解就是相当于windows的快捷方式。ln-s/opt/dir/tmp/ddd命令行格式如下:ln-s源目录目标软连接进入软连接cd/opt/dir实际上ddd这个软连接就相当于/opt/dir了…

  • linux平均负载什么意思_负荷率和负载率一样吗

    linux平均负载什么意思_负荷率和负载率一样吗1,Linux系统的平均负载是什么?特定时间间隔内运行队列中的平均进程数,好象还不够明白:就是进程队列的长度,有多少个进程在排队等待运行2,什么是”进程队列”?一个进程满足以下条件就会位于进程队列中1,它没有在等待I/O操作的结果2,它没有主动进入等待状态(即没有调用wait)3,它没有被停止3,如何查看平均负载?最简单的命令是uptime例子:[www.linuxidc.com@localho…

  • 开源四足机器人 附设计图及代码「建议收藏」

    斯坦福学生机器人俱乐部(StanfordStudentRoboticsclub)ExtremeMobility团队最近迎来了一名新成员——一个名为StanfordDoggo的四足机器人。这个机器人能跳1米多高,还能表演后空翻。与其他四足机器人动辄上万美元的成本不同,这个机器人的成本降到了3000美元以下,而且设计团队开源了该机器人的设计图、代码以及材料清单。任何感兴趣的人…

  • windows10开启ssh_ssh连接windows

    windows10开启ssh_ssh连接windowswindowsssh命令MicrosoftannounceditwasbringinganintegratedOpenSSHclienttoWindowsin2015.They’vefinallydoneit,andanSSHclientishiddeninWindows10’sFallCreatorsUpdate.Youcannow…

    2022年10月21日
  • python与java的比较_Python和Java两者有什么区别?

    python与java的比较_Python和Java两者有什么区别?Java是具有悠久历史的老牌开发语言,Python是如今人工智能时代的首选语言,无论是Java还是Python都相当强大,这两门语言有很多的相似之处,但是也有很多的不同,难免会拿来比较。今天千锋小编就和大家对比一下Python和Java,看看两者有什么区别?1.开源这两者都是开源语言,换言之你可以随意的使用这两门语言而不需要付费,你也可以阅读他们的源代码学习,并且对它们做一些改动。在这一点上,两者…

  • 图片切割工具—产生多个div切割图片 采用for和一的二维阵列设置背景位置

    图片切割工具—产生多个div切割图片 采用for和一的二维阵列设置背景位置

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号