Vue页面手动刷新,实现导航栏激活项还原到初始状态


Posted in Javascript onAugust 06, 2020

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

//错误示范
setTimeout(bidOrderInit, 200);
//上面那样是不行的,网上查了下, 大致是说在setTimeout中this指向window对象, 
//于是乎被定时的方法中就使用不到vue的this对象了
//正确示范
//可以无视对ie的支持时
setTimeout(()=> {
 this.bidOrderInit();
}, 200);
//需要兼容ie时
setTimeout(function () {
 this.bidOrderInit();
}, 200);

以上这篇Vue页面手动刷新,实现导航栏激活项还原到初始状态就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 #Javascript
前端开发基础javaScript的六大作用
Aug 06 #Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 #Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 #Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 #Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 #Javascript
解决vue路由name同名,路由重复的问题
Aug 05 #Javascript
You might like
将PHP作为Shell脚本语言使用
2006/10/09 PHP
深入解析php之apc
2013/05/15 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
php二维码生成以及下载实现
2017/09/28 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
建设工程授权委托书
2014/09/22 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
教师党员承诺书2015
2015/01/21 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
退货证明模板
2015/06/23 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
详解如何用Python实现感知器算法
2021/06/18 Python
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python