这篇文章给大家分享的是有关Vue页面手动刷新，实现导航栏激活项还原到初始状态的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
场景描述：在页面中存在顶部导航和左侧导航，左侧导航和右侧内容区使用了命名视图实现，点击左侧导航的链接时，右侧内容区相应显示不同组件内容。问题：在当前链接手动刷新浏览器（例如：浏览器地址为/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 } ] } ] } ]
补充知识：vue手动刷新视图以及其他小问题
最近把手头上一个使用angularJS+jquery各种七七八八组件写的页面拿vue+elementUI重写了一边, 真是极度丝滑, 记录一些vue和elementUI的小问题
1.如果vue中的数据结构比较庞大的话, 十分有可能会出现model更新而视图不更新/model和视图都不更新也不报错的情况, 此时需要手动刷新vue的数据, 在change或click事件中, 使用this.$forceUpdate()手动刷新视图
//像这样 changeSef: function () { //手动刷新视图 var that = this; that.$forceUpdate(); },
2.在vue中使用setTimeout
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
