推荐一个摸手的大神:
https://github.com/PanJiaChen/vue-element-admin
思路:
在点击跳转时,记录路由信息到state的一个数组里,
这个数组的数据被拿来渲染tagview,
同时对路由渲染处的router-view进行缓存(<keep-alive>)
剩下的就是对state路由数组的操作。
贴上关键代码
home.vue
<template>
<el-container class="box">
<el-aside class="lef_nav_box" width="200px">
<leftNav></leftNav>
</el-aside>
<el-container>
<el-header>
<topHeader></topHeader>
</el-header>
<el-main v-if='isHome'>主页哟</el-main>
<el-main v-if='!isHome'>
<crumbs class="mb20"></crumbs>
<tagViews></tagViews>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</template>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
export default { components: { HelloWorld, leftNav, topHeader, tabNav, tagViews, crumbs }, data(){ return { isHome:true } }, created(){ this.routeIsHome(); }, methods:{ routeIsHome(){//首页判断 let self = this; let isHome = true; if(this.$route.meta.pageName =='首页' && this.$route.meta.parentPageName ==''){ isHome = true }else{ isHome = false; } this.$nextTick(()=>{ self.isHome = isHome; }) } }, watch: { '$route' (to, from) { let self = this; let isHome = true; if(to.meta.pageName =='首页' && to.meta.parentPageName ==''){ isHome = true; }else{ isHome = false; } this.$nextTick(()=>{ self.isHome = isHome; }) } } }
left.vue
<div v-if="item.children.length>0" v-for="(tmp,idx) in item.children"> <el-menu-item :index="(index+1)+'-'+idx"> <div @click="goPage(tmp.text,tmp.url)">{{tmp.text}}{{tmp.url}}</div> </el-menu-item> </div>
goPage(nameZh,nameE){ var obj = { nameZh:nameZh, nameE:nameE } this.$store.commit('addPageCache', obj);//记录路由 this.$router.push('/'+nameE)//页面跳转
}
sotre.js
export default new Vuex.Store({
state: {
pageCache:[],//缓存路由,制作tag—view
curPage:'',//当前页
crumbs:{firstPage:'首页',parentPage:'',curPage:''}//面包屑
},
mutations: {
addPageCache(state,obj){//添加缓存页面
let isTrue = state.pageCache.some((cur,index,arr)=>{
return cur['nameE'] && cur['nameE'] == obj['nameE'];//避免重复添加
})
if (isTrue) return;
state.pageCache.push({
nameE:obj.nameE,
nameZh:obj.nameZh,
paratNameZh:obj.paratNameZh
})
},
removePageCache(state,obj){//清除页面缓存
var pageCache = state.pageCache.filter((cur,index,arr)=>{
if(cur['nameE'] && cur['nameE'] != obj['nameE']){
return cur;
}
})
if(pageCache.length != state.pageCache.length){//删除成功
state.pageCache = pageCache;
if(pageCache.length > 0){//存在多的tagview情况下
obj.router.go(-1);
}
}
},
setCurPage(state,name){//设置当前页
console.log(name)
state.curPage = name;
},
clearPageCache(state){//清空tagview
state.pageCache = [];
}
}
})
tag_view.vue
<template> <ul class="tag_views" v-if="$store.state.pageCache.length>0"> <li :t="$store.state.curPage" :class="{active: $store.state.curPage == item.nameE }" v-for="(item,index) in $store.state.pageCache" @click.stop="goPage(item.nameZh,item.nameE)"> <div>{{item.nameZh}}<i class="el-icon-close" @click.stop="removeTab(item.nameZh,item.nameE)"></i></div> </li> </ul> </template> <script> export default { data() { return { } }, methods: { goPage(nameZh,nameE){ this.$router.push('/'+nameE) }, removeTab(nameZh,nameE){//移除tab var obj = { nameZh:nameZh, nameE:nameE, router:this.$router } this.$store.commit('removePageCache', obj); } } } </script>
router.js
//路由拦截器
router.beforeEach((to, from, next) => {
//根据字段判断是否路由过滤
if(to.meta.requireAuth) { // 判断该路由是否需要登录权限
if(localStorage.getItem('sid')) { //身份信息获取
if(to.meta.pageName =='首页'){
router.app.$options.store.commit('clearPageCache');//清空tagview
}else if(to.name != ''){//显示当前tagview
router.app.$options.store.commit('setCurPage',to.name);
}
next();
} else {
next({
path: '/login'
})
}
} else {
next();
}
});
下面是废话(坑自己系列),可以跳过:
开始想的是用elementUI的tabs做这个东西。tabs有自定义删除标签页的功能,点击可以切换。那把页面都渲染在tabs里进行切换,想干掉点小叉叉就好了,简直完美。
于是渲染左侧导航栏后,点击时把需要的信息传给state记录,tabs通过拿state数据来渲染。
有个字段content:‘’即tab内容数据。改怎么把页面渲染进去呢?
于是我给内容里放router-view ,然后加上name做成命名视图。通过名字去匹配路由
在路由里一通配置,渲染时得到一条闪亮的字符串router-view。该如何让它重新渲染呢?
网上搜来搜去有一个解决视图不渲染的办法,加一个动态key,那就加吧。
F5 F5 F5 CTRL+F5 F5 F5 F5 CTRL+F5 唉!!。
有人这么干成功过的私我QQ953708317