场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容。问题:在当前链接手动刷新浏览器(例如:浏览器地址为/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', // 图标样式classmenuShow: 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', // 图标样式classmenuShow: 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 }]}]
}
]

转载于:https://www.cnblogs.com/yeqrblog/p/8961707.html

Vue页面手动刷新,导航栏激活项还原到初始状态问题解决方案相关推荐

  1. vue中如何在登陆页面不显示导航栏

    导航栏作为系统的通用组件,我并不想让其显示在登陆页面中,因此可以按照以下方法实现 1.将通用组件如导航栏等和<router-view />放在一起 app.vue <div>& ...

  2. 记一次小程序自定义导航栏及加载动画的解决方案

    记一次小程序自定义导航栏及加载动画的解决方案 主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...

  3. Android 9.0 10.0 沉浸式状态栏导致导航栏状态栏灰色蒙层的解决方案

    1.概述 在10.0的系统产品开发中,在app开发中,沉浸式状态栏也是常有的样式,但是设置沉浸式状态栏后,会导致状态栏和导航栏会有灰色蒙层的问题存在 解决方案: DecorView是整个Window界 ...

  4. Vue:如何保持导航栏的高亮状态

    我们在利用Vue写后台管理系统时,对于导航栏我们需要保持其处于选择的高亮状态,大概要经过如下三个步骤: 为所需要的点击的二级菜单栏设置点击事件,把对应的index值保存在sessionStorage中 ...

  5. h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结

    Aphorism grow in errors overview 最近在写一个 移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面 底部的 导航条 想到的实现方案: 通过 ...

  6. vue手机端底部导航栏

    业务逻辑: 项目多个页面需用到底部导航栏,所以抽离出来,以组件的方式引入父组件. 方法一 更新(2019年5月6日),关于底部导航栏的应用,还可以利用子组件和父组件的关系来绑定. 首先增加一个父组件文 ...

  7. vue+ElementUI实现左边导航栏点击右边内容变化(亲测有效)

    elementUI官网 一个导航栏组件,若干个它的子组件,也就是右边的内容组件 我这里准备了五个子组件 1.首先看home.vue组件(导航栏组件) <template><el-co ...

  8. html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...

    最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...

  9. 微信小程序之子页面动态修改导航栏标题文字内容

    在实际的项目开发中,一般我们页面导航栏的标题文字都不是固定的,而是根据场景需要动态设置的,这个如何实现呢.微信官方提供的方法如下: 1.设置动态的 onLoad: function (options) ...

最新文章

  1. qt中socket通信流程图_使用QT实现简单的tcp/ip通信
  2. jQuery 基础学习笔记
  3. git 的安装以及使用:是一个开源的分布式版本控制系统,可以对项目进行版本管理。 早期是linux之父用来管理linux系统源代码的(linux是和windows一样操作系统 开源免费的操作...
  4. Bootstrap全局CSS样式之表单
  5. LeetCode 781. 森林中的兔子(哈希+贪心)
  6. jsp内置对象--application
  7. 面试中,答不出产品方法论?4个方法教给你...
  8. java jdom_JAVA JDOM生成XML
  9. 【转载】spring.net 学习系列目录
  10. Saas项目和Pass项目
  11. 【BDTC 2016】专访中兴飞流吕阿斌、郑龙:Yita,基于数据流的大数据计算引擎...
  12. html表格中加入斜线,使用css给table表格表头添加斜线(斜线表格)
  13. 5. 列表、元组和集合
  14. 热爱生命 - 汪国真
  15. Unity shader系列:好用的IDE--JetBrain Rider
  16. “互联网+”拯救了星巴克,出路是“第四空间
  17. 达梦数据库DM8支持Seata事务框架
  18. 【Anki】模板自定义
  19. 数独技巧-基础摒除法
  20. android的WebView加载html内容图片超出屏幕范围

热门文章

  1. lisp ssget 浩辰_AutoCAD和浩辰CAD,gCAD都可以用的lisp
  2. 会java学scala多久_Scala中超时的未来
  3. 1001 A+B Format (20point(s))(Java和C++)
  4. 283. Move Zeroes(数组篇)
  5. centos7 安装git_Gitlab安装及使用
  6. php模拟登录qq邮箱_PHP 利用QQ邮箱发送邮件的实现
  7. java 泰勒级数_鸡群优化算法(CSO)、蜻蜓算法(DA)、乌鸦搜索算法(CSA)、泰勒级数(Taylor series)...
  8. Win10修改管理员用户名(注册表深度完全修改更改c盘下的用户名)
  9. 如何使用Visual studio C++(VC++)编译C?图解,详!!!
  10. 三种常用SoC片上总线的分析与比较 (Z)