快捷导航栏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;
                })
            }
        }
    }

View Code