标签:return menus watch 就是 round 问题 code nav col
场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容。问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterprise/list),顶部导航激活项还原到初始状态(这里默认是“工作台”项)。
原理:每次刷新都会重新实例化Vue,也就是会调用created方法。
<template> <el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true"> <el-menu-item index="/">工作台</el-menu-item> <el-menu-item index="/enterpriseManager">企业管理</el-menu-item> <el-menu-item index="/orderManager">订单管理</el-menu-item> <el-menu-item index="/systemManager">系统管理</el-menu-item> </el-menu> </template> <script> export default { name: ‘app‘, data () { return { defaultActiveIndex: "/" } }, created() { // 组件创建完后获取数据, // 此时 data 已经被 observed 了 this.fetchData() }, methods: { handleSelect(index){ this.defaultActiveIndex = index; }, jumpTo(url){ this.defaultActiveIndex = url; this.$router.push(url); //用go刷新 }, fetchData () { var cur_path = this.$route.path; //获取当前路由 var routers = this.$router.options.routes; // 获取路由对象 var nav_type = ""; for(var i=0; i<routers.length; i++){ var children = routers[i].children; if(children){ for(var j=0; j<children.length; j++){ var grand_children = children[j].children; if(grand_children){ for(var k=0; k<grand_children.length; k++){ if(grand_children[k].path == cur_path){ nav_type = routers[i].type; break; } } } } } } if(nav_type == "home"){ this.defaultActiveIndex = "/"; } else if(nav_type == "enterprise"){ this.defaultActiveIndex = "/enterpriseManager"; } } } watch: { ‘$route‘: ‘fetchData‘ } } </script>
附上router配置格式:
export default [ { path: ‘/‘, type: ‘home‘, //自定义type区分不同模块菜单 name: ‘home‘, redirect: ‘/dashboard‘, component: Home, menuShow: true, children: [ { path: ‘/dashboard‘, component: HomeNav, name: ‘dashboard‘, leaf: true, // 只有一个节点 iconCls: ‘icon-home‘, // 图标样式class menuShow: true, children: [ { path: ‘/dashboard‘, component: Dashboard, name: ‘首页‘, menuShow: true } ] }, { path: ‘/mySet‘, component: HomeNav, name: ‘我的设置‘, iconCls: ‘el-icon-menu‘, menuShow: true, children: [ { path: ‘/mySet/plan‘, component: Plan, name: ‘行程计划‘, menuShow: true }, { path: ‘/mySet/maillist‘, component: Maillist, name: ‘通讯录‘, menuShow: true } ] } ] }, { path: ‘/enterpriseManager‘, type: ‘enterprise‘, name: ‘enterprise‘, component: Home, redirect: ‘/enterprise/list‘, menuShow: true, children: [ { path: ‘/enterpriseList‘, component: EnterpriseNav, name: ‘enterpriseList‘, leaf: true, // 只有一个节点 iconCls: ‘icon-home‘, // 图标样式class menuShow: true, children: [ { path: ‘/enterprise/list‘, component: EnterpriseList, name: ‘企业列表‘, menuShow: true } ] }, { path: ‘/enterpriseAdd‘, component: EnterpriseNav, name: ‘enterpriseAdd‘, leaf: true, // 只有一个节点 iconCls: ‘el-icon-menu‘, menuShow: true, children: [ { path: ‘/enterprise/add‘, component: EnterpriseAdd, name: ‘企业添加‘, menuShow: true } ] }, { path: ‘/enterpriseValidate‘, component: EnterpriseNav, name: ‘enterpriseValidate‘, leaf: true, // 只有一个节点 iconCls: ‘el-icon-menu‘, menuShow: true, children: [ { path: ‘/enterprise/validate‘, component: EnterpriseValidate, name: ‘企业认证‘, menuShow: true } ] } ] } ]
标签:return menus watch 就是 round 问题 code nav col
原文地址:https://www.cnblogs.com/yeqrblog/p/8961707.html