最近作者 碰到了一个需求 ，退出后 重新登录 之前的标签依然保留在页面上
这里主要是 用到了 vuex
首先主要是 点击退出按钮时 记录 退出前 当前页面的路由和页面名称
点击退出：
loginout() {
localStorage.clear();
this.$router.push({
path:'/login',
query: {
historyPath:{ // 拿到 退出前 当前页面的路由和页面名称
title:this.$route.query.title,
path: this.$route.path //记录当前是从哪里跳过去的 在登录后直接返回原来的页面
}
}
});
｝
点击登录：
login(){
this.$router.push({ // 判断有没有路由 ，没有的话 跳到首页
path:this.$route.query.historyPath&&this.$route.query.historyPath.path?this.$route.query.historyPath.path:"/",
query: {
title:this.$route.query.historyPath&&this.$route.query.historyPath.path?this.$route.query.historyPath.title:''
}
})
}
菜单标签页：
watch:{ //点击菜单的时候 更新 路由
$route(newValue, oldValue){
this.setTags(newValue);
},
},
created(){ // //第一次进来的时候 拿到标签数组数据 tabsList
if(typeof window!="undefined"){
//在页面加载时读取localStorage里的状态信息
window.localStorage.getItem("modifyTabsList") && this.$store.commit('modifyTabsList',JSON.parse(window.localStorage.getItem("modifyTabsList")));
console.log('this.$store.:',this.$store.state.tabsList)
this.$nextTick(()=>{
this.setTagsOld(this.$route);
})
}
},
// 更新标签
setTags(route){
const isExist = this.tagsList.some(item => {
return item.path === route.path
})
if(!isExist&&route.name!=="index"){
this.tagsList.push(route)
} else {
const index = this.tagsList.findIndex(v => Object.is(v.path, route.path))
if(route.path == '/'){
return
}else{
this.tagsList.splice(index, 1, route)
}
}
let tabs = []
for(let i=0;i<this.tagsList.length;i++){
if(this.tagsList[i].query.title){
tabs.push({
fullPath:this.tagsList[i].fullPath,
path:this.tagsList[i].path,
query:{
title:this.tagsList[i].query.title,
rf:this.tagsList[i].query.rf
}
})
}
}
window.sessionStorage.setItem("modifyTabsList", JSON.stringify(tabs)) //保存标签数组
this.$store.commit('modifyTabsList',tabs) //保存标签数组
console.log(this.$store.state.tabsList)
// 这样 退出后 可以拿到 最新的数组，下次登录的时候 可以才 created 钩子函数里 拿到最新的标签数组
},
网友评论