快捷导航栏tagView

推荐一个摸手的大神：

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>

　　

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