思路:
1、在vuex中存储点击过的标签页
2、当路由刷新时,将路由添加到vuex中,并判断当前路由是否已经再标签页列表中
3、关闭标签页时,将vuex中的路由删除
代码:
vuex中保存点击过的路由列表,新建tagsPages.js文件
const tagsPages= {
state:{
//路由列表
tagsPages:[]
},
mutations:{
//添加路由
ADD_PAGE(state,page){
//判断路由是否已经在列表中,如果存在,不再添加到列表中
if(state.tagsPages.some(item=>item.path == page.path))
return;
//添加路由到列表中
state.tagsPages.push({
name: page.name,
title: page.meta.title,
path: page.path
})
},
//删除路由
DEL_PAGE(state,page){
for(let[i,p] of state.tagsPages.entries()){