bhuh12 / vue-router-tab Goto Github PK

当打开了很多页面后，页签处显示不下每个页签，可以考虑一下增加左移、右移的功能按钮吗？
另外在右边，是否可以考虑增加几个自定义的按钮，例如常用到的“全屏”、“退出”等，具体执行的方法自定义。

It would be nice if i could add a custom class to root router-tab and router-tab-container :)

api 只有关闭指定页面，一旦打开很多tab其中还包含iframe的table,不可能去一个一个指定的关闭。table页签的右键 关闭其他 的功能怎么用代码触发？
刷新操作 应该也有一个触发 刷新其他的功能。

代码就写了这两句，切换的时候，标题没有了

我是使用这种方式去配置路由的，请问nuxt中该怎样正确使用vue-router-tab？

router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/about.vue')
      })
    }
  }

属性配置

路由元配置

页签页面实例属性

方法

其他

• Nuxt 支持
• 发布库到 npm 命令

`vue-router-tab.umd.min.js?f57d:1 [Vue Router Tab] 未能匹配到路由信息
y @ vue-router-tab.umd.min.js?f57d:1
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in getter for watcher "restoreKey": "TypeError: Cannot read property 'path' of undefined"

found in

--->


at src/layouts/MainLayout.vue
at src/App.vue
`

Describe the bug
I want to add default tabs

<router-tab :tabs=[{to: '/home'}] /> does not work, or am i missing something?

iframe.js中的getIframePath路径获取需要判断下this.basePath是否等下undefined，
今天用您这个加载外部网页出现无法加载，路径加了个undefined
建议如下判断：
let path = this.basePath === undefined ? iframe/${encodeURIComponent(src)} : ${this.basePath}/iframe/${encodeURIComponent(src)}

Is there a way to change the text color of the tab in the function?

需求如题.
现在我只能自己写一个ifram页面，当做一般的页面做路由跳转，还有什么好的方法吗？
非常感谢！！！
超级好用的库！

it would be nice if you could sort tabs with drag and drop.

Bug 描述

参照了文档写的，运行代码没有出现小标签，请大佬有空瞧瞧。

截图

使用自定义模板后，iframe页签右上角的关闭按钮无效，使用右键菜单关闭就可以

先赞一下，很好用的tab组件。

然后想请问一下，现在是否支持直接在router配置中配一个访问iframe的tab定义？

看了文档和demo，是通过routerTab.openIframe这个方法来打开一个iframe的tab。

还请指导。

Bug 描述

我设置了多层嵌套路由，导航标签页还是只根据第一层嵌套的路由变化，访问第二级子层路由的时候没变化，导航标签页还是指向的第一层，请问所有路由只能放到同一级吗？

1. 請問i18n有示範的案例可以參考嗎?
2. 另外我有嘗試把vue-i18n-sandbox 範例的檔案整合, 但是code使用get取得目錄底下json檔案，但是無法讀取到檔案，不知道如何設定router

fetch(../lang/${locale}.json , {
method: 'get',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})

我在翻译文档的过程中，发现以下一点的表述有误：

https://bhuh12.github.io/vue-router-tab/guide/program.html
3. 由于缓存，Webpack 热加载后的页面不刷新：

在路由页面组件全局混入的 activated 钩子里，记录 vm.$vnode.componentOptions.Ctor.cid。如果与上一次的值不一致，则销毁页面，组件重新渲染

实际上，在ab4bfd4这次commit中就已经把上述的这部分代码，从routerPage.js的activated hook中，移到了RouterAlive.js的render函数中了。

我会按照实际代码中的情况翻译 :)

建议能够支持3级及以上的路由，看了一下demo，嵌套三级目录的并没有在tab上显示出来，而是在页面中作为一个单独的router-view中显示出来。

是不是应该换成keep-alive

a general setting or a meta setting where you could fore reload on click

如果要实现点击切换tab后同时切换对应左侧菜单的高亮,这时候要用到啊

Bug 描述

严重的内存泄漏问题，被销毁的组件并不能回收内存。

问题重现

重现行为的步骤：

1. 打开demo页
2. 打开chrome devtool， 打开Performance Monitor
3. 不停点击刷新按钮，然后打开多个页签再关闭

预期行为

内存和DOM持续增加，不能被GC回收，我在实际项目中 ，长时间使用后，关闭所有页签，产生数十万dom和超过1g的js heap也没有被gc回收，确定为内存泄漏问题

截图

开发环境（请填写以下信息）

• Node.js: v10.13.0
• Vue: v2.6.10
• Vue Router: V3.0.1
• Vue Router Tab: v0.2.0

运行环境（请填写以下信息）

• 设备: PC
• 操作系统: Windows 10
• 浏览器和版本: Chrome最新正式版

问题： 使用了element的情况下，图标会显示两套。互相叠加
看源码是加了element-ui的icon class，但是看package.json里面并没有对element-ui的依赖。

我抽象了一个页面级组件，需要多次重复打开在不同的页签里，但是目前页签的标题只能在路由的meta里配置，而vue-router相应的this.$router.push方法是无法修改meta信息的。

例如上图是我的路由，不同的页签会因为传入的formid不同而不同，但是页签的名称无法动态变化

希望考虑同一个组件在不同页签多次打开后针对页签属性的更新提供一个方案，可以在路由中约定额外的一个数据对象如：tab:{title:'',icon:''}，当存在此对象时优先使用，否则考虑meta中的信息以达到兼容以前的做法。

描述您考虑过的替代方案

mount时，访问原生dom对象进行更新，不过这个完全不是数据驱动的思路，最后放弃了。

Bug 描述

打开新的tab，再把它关闭后，通过谷歌的工具发现存在Detached HTML元素，该tab对应的页面缓存没有被清理。

问题重现

重现行为的步骤：

1. 打开新tab
2. 关于打开的tab
3. F12打开谷歌的开发者工具
4. 点击【Memory】->【Take snapshot】
5. 在Shanpshot里面查找Detached，可以看到有很多未释放的DOM元素

预期行为

TAB关闭后，该tab内组件占用的内存能够完全释放

截图

代码重现

Git 重现地址如下：
https://github.com/lvdongbo/vue-tab-test.git

开发环境（请填写以下信息）

• Node.js: v10.16.0
• Vue: v2.6.10
• Vue Router: V3.1.3
• Vue Router Tab: v0.2.7

运行环境（请填写以下信息）

• 设备: PC
• 操作系统: Windows 10
• 浏览器和版本: Chrome 77.0.3865.120 x64

您的需求是否与问题有关？

yes

描述你想要的解决方案

in fact, i don't need the route and i can't effect the route, can you provide a useful without router? thank you

描述您考虑过的替代方案

i try to use iview Tabs, but its remove function always have probleam, but it was very clear

附加内容

Bug 描述

参照 https://bhuh12.github.io/vue-router-tab/guide/essentials/#%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE 安装和入门完成后，报错标题所示例错误：

Error in getter for watcher "restoreKey": "TypeError: Cannot read property 'path' of undefined"

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'path' of undefined
at VueComponent.getBasePath (vue-router-tab.umd.min.js?f57d:1)
at VueComponent.restoreKey (vue-router-tab.umd.min.js?f57d:1)

截图

关键代码

"vue": "^2.6.11",
"vue-router": "^3.1.3",

开发环境（请填写以下信息）

• Node.js: [例如: v12.4.0]
• Vue: [例如: v2.5.22]
• Vue Router: [例如: V3.0.1]
• Vue Router Tab: [例如: v0.2.0]
  node 12.11.0
  "vue": "^2.6.11",
  "vue-router": "^3.1.3",
  "vue-router-tab": "^1.0.0-alpha.1",

运行环境（请填写以下信息）

Chrome

在嵌套的页面调用this.$router.push({path:'xxx'})报错
vue-router.esm.js?8c4f:2181 TypeError: Cannot read property 'path' of undefined
at t.get (vue-router-tab.umd.min.js?f57d:1)
at eval (vue-router-tab.umd.min.js?f57d:1)
at iterator (vue-router.esm.js?8c4f:2225)
at step (vue-router.esm.js?8c4f:1896)
at step (vue-router.esm.js?8c4f:1900)
at step (vue-router.esm.js?8c4f:1900)
at step (vue-router.esm.js?8c4f:1900)
at runQueue (vue-router.esm.js?8c4f:1904)
at HashHistory.confirmTransition (vue-router.esm.js?8c4f:2255)
at HashHistory.transitionTo (vue-router.esm.js?8c4f:2125)
abort @ vue-router.esm.js?8c4f:2181
iterator @ vue-router.esm.js?8c4f:2251
step @ vue-router.esm.js?8c4f:1896
step @ vue-router.esm.js?8c4f:1900
step @ vue-router.esm.js?8c4f:1900
step @ vue-router.esm.js?8c4f:1900
runQueue @ vue-router.esm.js?8c4f:1904
confirmTransition @ vue-router.esm.js?8c4f:2255
transitionTo @ vue-router.esm.js?8c4f:2125
push @ vue-router.esm.js?8c4f:2595
eval @ vue-router.esm.js?8c4f:2913
push @ vue-router.esm.js?8c4f:2912
logout @ header.vue?24d4:70
handleCommand @ header.vue?24d4:65
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
handleMenuItemClick @ element-ui.common.js?5c96:2487
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
dispatch @ emitter.js?d010:29
handleClick @ element-ui.common.js?5c96:2774
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:6900 [Violation] 'click' handler took 268394ms
vue-router.esm.js?8c4f:2146 Uncaught (in promise) TypeError: Cannot read property 'path' of undefined
at t.get (vue-router-tab.umd.min.js?f57d:1)
at eval (vue-router-tab.umd.min.js?f57d:1)
at iterator (vue-router.esm.js?8c4f:2225)
at step (vue-router.esm.js?8c4f:1896)
at step (vue-router.esm.js?8c4f:1900)
at step (vue-router.esm.js?8c4f:1900)
at step (vue-router.esm.js?8c4f:1900)
at runQueue (vue-router.esm.js?8c4f:1904)
at HashHistory.confirmTransition (vue-router.esm.js?8c4f:2255)
at HashHistory.transitionTo (vue-router.esm.js?8c4f:2125)

Vue Router Tab] 未能匹配到路由信息
这个怎样解决

您的需求是否与问题有关？

建议放开2级以上路由可以加入tab的功能

描述你想要的解决方案

这样能使路由的组织更清晰，现在不得不把三级的路由也塞到二级去，能做成可配置的更好

错误报错信息=》
TypeError: Cannot read property 'path' of undefined
at VueComponent.getPagePath (matched.js?236e:55)
at VueComponent.getAliveId (rule.js?eed5:41)
at VueComponent.updateActiveTab (index.js?92e3:173)
at VueComponent.created (index.js?92e3:121)
at invokeWithErrorHandling (vue.esm.js?c5de:1863)
at callHook (vue.esm.js?c5de:4222)
at VueComponent.Vue._init (vue.esm.js?c5de:5011)
at new VueComponent (vue.esm.js?c5de:5157)
at createComponentInstanceForVnode (vue.esm.js?c5de:3292)
at init (vue.esm.js?c5de:3123)

问题造成原因系统是多级嵌套路由，这边对应的代码需要判断是否是undefined，对应的文件matched.js，
43行建议=> let { path } = this.matchRoutes().baseRoute===undefined?"": this.matchRoutes().baseRoute;

54行建议,页面嵌套路由代码位置=>if (isNest&&pageRoute!==undefined) {}

iframe.js对应一出代码也可能会出现undefined，获取 iframe 页签路由路径对应代码位置 ，16行
let path =this.getBasePath()===undefined?iframe/${encodeURIComponent(src)} : ${this.getBasePath()}/iframe/${encodeURIComponent(src)}

你好，我这里有一个需求是每次点链接都要打开一个新页签，不管是vue组件页面还是iframe页面，不知道在这个插件里要怎么设置呢？
比如说有个链接点击是新增项目页面，然后点一次出现一个新增项目页，再点一次新开一个新增项目页，然后这些打开的页面都会保持自身的数据，在这个页面输入什么切换到另一个页面后回来还是原样，另一个页面也是
还有那种编辑页，比如说id为1的编辑页也是，点击一次出现一个，然后这些多个id为1的编辑页也要数据不串

Bug 描述

针对 bug 清晰简洁的描述。

问题重现

重现行为的步骤：

1. 去'...'
2. 点击“...”
3. 向下滚动到“....”
4. 出现"..."错误

预期行为

清楚简洁地描述您期望发生的事情。

截图

如果可以，请添加屏幕截图以帮助解释您的问题。

代码重现

选择一种方式即可

Git 重现地址（推荐）

您可以将可运行并且能复现问题的最简代码提交到 git 仓库（如 Github），然后提供给作者可访问的地址

关键代码

尽可能留下关键代码片段，方便作者定位问题

{
      path: '/',
      layout: HeaderAsideLayout,
      component:Index,
      redirect:"/index",
  },

这个pageRoute会是undefined

开发环境（请填写以下信息）

• Node.js: [例如: v12.4.0]
• Vue: [例如: v2.5.22]
• Vue Router: [例如: V3.0.7]
• Vue Router Tab: [例如: v0.2.0]

运行环境（请填写以下信息）

• 设备: [例如: PC]
• 操作系统: [例如: Windows 10]
• 浏览器和版本: [例如: Chrome 75.0.3770.100 x64]

附加内容

在此添加有关此问题的任何其他内容。

刷新页面后，从缓存数据里面拿到tab标签，包括id那些信息

Is it possible to set the English documentation as the main one?

要看教程配置的，但一直出这个错误，找不出原因在哪，帮帮我吧，浪费了好几个小时了

this.matchRoutes(...).baseRoute is undefined

Looks like a cool/good project that would be usefull

Any plans of making the readme and documentation in english?

vue -V是2.9.6
按“https://bhuh12.github.io/vue-router-tab/guide/essentials/”进行了引入，可以正常使用
main.js
// 引入组件和样式
import RouterTab from 'vue-router-tab'
import 'vue-router-tab/dist/lib/vue-router-tab.css'

Vue.config.productionTip = false
Vue.use(RouterTab)

但是在任意组件的vue文件中使用this.$touterTab关键字都是未定义错误，有没有同样问题的？应该如何解决？

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Development Environment (please complete the following information):

• Node.js: [e.g. v12.4.0]
• Vue: [e.g. v2.5.22]
• Vue Router [e.g. v3.0.1]
• Vue Router Tab [e.g. v0.2.0]

Operating Environment (please complete the following information):

• Device: [e.g. Desktop]
• OS: [e.g. Windows 10]
• Browser [e.g. stock browser, Chrome]
• Version [e.g. 75]

Additional context
Add any other context about the problem here.

必须保留一个页签限制，能否去掉或者可配置

例如打开 baidu

调用this.$routerTab.openIframeTab('https://www.baidu.com', '百度', 'icon-web')报错，帮看看什么问题

Uncaught DOMException: Blocked a frame with origin "https://www.baidu.com" from accessing a cross-origin frame.
at HTMLDocument.t (https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/js/all_async_search_2345059.js:181:309)
at i (https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_1c4228b8.js:25:20711)
at Object.fireWith [as resolveWith] (https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_1c4228b8.js:25:21615)
at Function.ready (https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_1c4228b8.js:14:3609)
at HTMLDocument.cP (https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_1c4228b8.js:14:769)
t @ all_async_search_2345059.js:181
i @ jquery-1.10.2_1c4228b8.js:25
fireWith @ jquery-1.10.2_1c4228b8.js:25
ready @ jquery-1.10.2_1c4228b8.js:14
cP @ jquery-1.10.2_1c4228b8.js:14