快捷导航栏tagView-白红宇

快捷导航栏tagView

阅读量：5167 次

发布时间：2019-06-13

本文共 4147 字，大约阅读时间需要 13 分钟。

推荐一个摸手的大神：

https://github.com/PanJiaChen/vue-element-admin

思路：

在点击跳转时，记录路由信息到state的一个数组里，

这个数组的数据被拿来渲染tagview，

同时对路由渲染处的router-view进行缓存（<keep-alive>）

剩下的就是对state路由数组的操作。

贴上关键代码

home.vue

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

left.vue


                                 
                                      
       
        {
   {tmp.text}}{
   {tmp.url}}

　　　　　　　　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

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