微客导航 » 文章资讯 » Vue + Elementui实现多标签页共存的方法

Vue + Elementui实现多标签页共存的方法

2023-08-21 17:25:07 154

这个主题，早在一年前就已经创建，也写了一些内容，碍于在应用上体验始终不够完美，一直只存着草稿。

经过多个平台实践，多次迭代，一些功能加了又减了，最后还是回归了最精简的版本，已适用于大部分的场景，若有需要，可自行扩展。

关键逻辑

使用keep-alive来缓存各标签页
通过vue-router的beforeEach方法来更新标签信息
通过vuex来保存标签信息
通过vuex来使关闭页不被缓存

核心代码

定义vuex的跨页变量（store/index.js)

importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state:{
worktab:{
list:[
{
name:'my',
tabname:'主页',
path:'/page/my'
}
],
current:{
name:'my',
tabname:'主页',
path:'/page/my'
}
},
closingPage:''
},
mutations:{
worktabRemove(state,p){
//关闭标签
letind=state.worktab.list.findIndex(s=>s.name===p)
if(ind>-1){
//清理keepalive-start
state.closingPage=state.worktab.list[ind].name
//清理keepalive-end
state.worktab.list.splice(ind,1)
}
if(p===state.worktab.current.name){
//是当前页，返回上一页
router.back()
}
},
worktabRoute(state,p){
letind=state.worktab.list.findIndex(s=>s.name===p.to.name)
if(ind>-1){
//标签已存在
state.worktab.current=state.worktab.list[ind]
}else{
//标签不存在，现在新建
state.worktab.list.push(p.to)
state.worktab.current=p.to
}
state.closingPage=''
}
},
actions:{
worktabRemove({commit},p){
commit('worktabRemove',p)
},
worktabRoute({commit},p){
commit('worktabRoute',p)
}
},
strict:debug
})

定义worktab标签栏组件，在主容器引用

路由控制通过beforeEach来更新标签信息

importVuefrom'vue'
importVueRouterfrom'vue-router'
importstorefrom'@/store'
importPagefrom'../components/console/Page.vue'
importMyfrom'../components/console/My.vue'
Vue.use(VueRouter)
//关联路由与组件
constroutes=[
{
name:'root',
path:'/'
},
{
path:'/page',
component:Page,
children:[
{
name:'my',
path:'my',
component:My,
meta:{
tabname:'个人主页'
}
}
]
}
]
//创建路由器
constrouter=newVueRouter({
routes
})
router.beforeEach((to,from,next)=>{
next()
store.dispatch('worktabRoute',{
to:{
name:to.name?to.name:'',
tabname:(to.meta&&to.meta.tabname)?to.meta.tabname:'',
path:to.path
},
from:{
name:from.name?from.name:'',
tabname:(from.meta&&from.meta.tabname)?from.meta.tabname:'',
path:from.path
}
})
return
})
exportdefaultrouter

主容器通过closingPage变量来及时清理关闭页面的缓存

总结

以上所述是小编给大家介绍的Vue+Elementui实现多标签页共存的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

Vue + Elementui实现多标签页共存的方法

热门推荐

随机推荐