您好,登录后才能下订单哦!
这篇文章给大家分享的是有关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
//错误示范 setTimeout(bidOrderInit, 200); //上面那样是不行的,网上查了下, 大致是说在setTimeout中this指向window对象, //于是乎被定时的方法中就使用不到vue的this对象了 //正确示范 //可以无视对ie的支持时 setTimeout(()=> { this.bidOrderInit(); }, 200); //需要兼容ie时 setTimeout(function () { this.bidOrderInit(); }, 200);
感谢各位的阅读!关于Vue页面手动刷新,实现导航栏激活项还原到初始状态的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。