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: "/"
js导航栏下拉菜单
}
},
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.$utes; // 获取路由对象
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页⾯⼿动刷新，实现导航栏激活项还原到初始状态就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。