bhuh12 / vue-router-tab Goto Github PK
View Code? Open in Web Editor NEWVue.js tab components, based on Vue Router.
Home Page: https://bhuh12.github.io/vue-router-tab/
License: MIT License
Vue.js tab components, based on Vue Router.
Home Page: https://bhuh12.github.io/vue-router-tab/
License: MIT License
fetch(../lang/${locale}.json
, {
method: 'get',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
建议能够支持3级及以上的路由,看了一下demo,嵌套三级目录的并没有在tab上显示出来,而是在页面中作为一个单独的router-view中显示出来。
需求如题.
现在我只能自己写一个ifram页面,当做一般的页面做路由跳转,还有什么好的方法吗?
非常感谢!!!
超级好用的库!
我是使用这种方式去配置路由的,请问nuxt中该怎样正确使用vue-router-tab?
router: {
extendRoutes (routes, resolve) {
routes.push({
name: 'custom',
path: '*',
component: resolve(__dirname, 'pages/about.vue')
})
}
}
你好,我这里有一个需求是每次点链接都要打开一个新页签,不管是vue组件页面还是iframe页面,不知道在这个插件里要怎么设置呢?
比如说有个链接点击是新增项目页面,然后点一次出现一个新增项目页,再点一次新开一个新增项目页,然后这些打开的页面都会保持自身的数据,在这个页面输入什么切换到另一个页面后回来还是原样,另一个页面也是
还有那种编辑页,比如说id为1的编辑页也是,点击一次出现一个,然后这些多个id为1的编辑页也要数据不串
Vue Router Tab] 未能匹配到路由信息
这个怎样解决
先赞一下,很好用的tab组件。
然后想请问一下,现在是否支持直接在router配置中配一个访问iframe的tab定义?
看了文档和demo,是通过routerTab.openIframe这个方法来打开一个iframe的tab。
还请指导。
我设置了多层嵌套路由,导航标签页还是只根据第一层嵌套的路由变化,访问第二级子层路由的时候没变化,导航标签页还是指向的第一层,请问所有路由只能放到同一级吗?
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关键字都是未定义错误,有没有同样问题的?应该如何解决?
打开新的tab,再把它关闭后,通过谷歌的工具发现存在Detached HTML元素,该tab对应的页面缓存没有被清理。
重现行为的步骤:
TAB关闭后,该tab内组件占用的内存能够完全释放
Git 重现地址如下:
https://github.com/lvdongbo/vue-tab-test.git
Is there a way to change the text color of the tab in the function?
当打开了很多页面后,页签处显示不下每个页签,可以考虑一下增加左移、右移的功能按钮吗?
另外在右边,是否可以考虑增加几个自定义的按钮,例如常用到的“全屏”、“退出”等,具体执行的方法自定义。
必须保留一个页签限制,能否去掉或者可配置
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
调用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
It would be nice if i could add a custom class to root router-tab and router-tab-container :)
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
Operating Environment (please complete the following information):
Additional context
Add any other context about the problem here.
建议放开2级以上路由可以加入tab的功能
这样能使路由的组织更清晰,现在不得不把三级的路由也塞到二级去,能做成可配置的更好
是不是应该换成keep-alive
属性 | 类型 | 默认值 | 说明 | 必需 |
---|---|---|---|---|
dragsort |
Boolean | true |
页签项拖拽排序 | — |
wheel-scroll |
Boolean | true |
鼠标滚轮滚动页签 | — |
属性 | 类型 | 默认值 | 说明 | 必需 |
---|---|---|---|---|
notab |
Boolean | false |
路由页面不显示页签头部,直接在 router-view 中展示 | — |
keepAlive |
Boolean | true |
是否缓存页签 | — |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
$routeTab |
Boolean | — | 当前页签数据,可动态更新页签信息(替换原本的 routeTab) |
方法/参数 | 类型 | 默认值 | 说明 |
---|
iframe.js中的getIframePath路径获取需要判断下this.basePath是否等下undefined,
今天用您这个加载外部网页出现无法加载,路径加了个undefined
建议如下判断:
let path = this.basePath === undefined ? iframe/${encodeURIComponent(src)}
: ${this.basePath}/iframe/${encodeURIComponent(src)}
要看教程配置的,但一直出这个错误,找不出原因在哪,帮帮我吧,浪费了好几个小时了
this.matchRoutes(...).baseRoute is undefined
问题: 使用了element的情况下,图标会显示两套。互相叠加
看源码是加了element-ui的icon class,但是看package.json里面并没有对element-ui的依赖。
我在翻译文档的过程中,发现以下一点的表述有误:
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函数中了。
我会按照实际代码中的情况翻译 :)
严重的内存泄漏问题,被销毁的组件并不能回收内存。
重现行为的步骤:
内存和DOM持续增加,不能被GC回收,我在实际项目中 ,长时间使用后,关闭所有页签,产生数十万dom和超过1g的js heap也没有被gc回收,确定为内存泄漏问题
it would be nice if you could sort tabs with drag and drop.
Is it possible to set the English documentation as the main one?
在嵌套的页面调用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)
针对 bug 清晰简洁的描述。
重现行为的步骤:
清楚简洁地描述您期望发生的事情。
如果可以,请添加屏幕截图以帮助解释您的问题。
选择一种方式即可
您可以将可运行并且能复现问题的最简代码提交到 git 仓库(如 Github),然后提供给作者可访问的地址
尽可能留下关键代码片段,方便作者定位问题
{
path: '/',
layout: HeaderAsideLayout,
component:Index,
redirect:"/index",
},
这个pageRoute会是undefined
在此添加有关此问题的任何其他内容。
我抽象了一个页面级组件,需要多次重复打开在不同的页签里,但是目前页签的标题只能在路由的meta里配置,而vue-router相应的this.$router.push方法是无法修改meta信息的。
例如上图是我的路由,不同的页签会因为传入的formid不同而不同,但是页签的名称无法动态变化
希望考虑同一个组件在不同页签多次打开后针对页签属性的更新提供一个方案,可以在路由中约定额外的一个数据对象如:tab:{title:'',icon:''},当存在此对象时优先使用,否则考虑meta中的信息以达到兼容以前的做法。
mount时,访问原生dom对象进行更新,不过这个完全不是数据驱动的思路,最后放弃了。
参照 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",
Chrome
刷新页面后,从缓存数据里面拿到tab标签,包括id那些信息
Describe the bug
I want to add default tabs
<router-tab :tabs=[{to: '/home'}] />
does not work, or am i missing something?
`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
`
如果要实现点击切换tab后同时切换对应左侧菜单的高亮,这时候要用到啊
a general setting or a meta setting where you could fore reload on click
api 只有关闭指定页面,一旦打开很多tab其中还包含iframe的table,不可能去一个一个指定的关闭。table页签的右键 关闭其他 的功能怎么用代码触发?
刷新操作 应该也有一个触发 刷新其他的功能。
Looks like a cool/good project that would be usefull
Any plans of making the readme and documentation in english?
使用自定义模板后,iframe页签右上角的关闭按钮无效,使用右键菜单关闭就可以
错误报错信息=》
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)}
例如打开 baidu
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.