场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容。问题:在当前链接手动刷新浏览器(例如:浏览器地址为/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页面手动刷新,导航栏激活项还原到初始状态问题解决方案的更多相关文章

  1. 前端Vue项目——初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...

  2. iOS7 下使用SVPullToRefresh 下拉刷新导航栏位置错误

    iOS7 下使用SVPullToRefresh 下拉刷新导航栏位置错误: 下拉刷新之后,tableview的第一列会跑到导航栏的下面: 修正:添加如下代码 /** * 下拉刷新 增加一个: */ // ...

  3. Vue 实现手动刷新组件

    Vue 实现手动刷新组件:https://www.jianshu.com/p/742142dc95f3

  4. Django进入监听端口就自动打开指定页面,无需导航栏手动添加(Django六)

    在我们进入监听端口时画面如下:而因为在urls.py中写过如下语句 我们在监听端口后加上/login就会跳转到login.html页面,如下图 那么如何一打开监听端口就可以走动跳转到login.htm ...

  5. vue-router+elelment-ui,实现导航栏激活高亮

    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" backgrou ...

  6. Vue 页面 前进刷新 后退不刷新(keepAlive)

    前言 遇到这一个个问题  需要是这样的 Vue里面的不刷新问题 页面分为: A 主页  B列表页  C 详情页 A  beforeRouteLeave 时设置 to.meta.keepAlive = ...

  7. 前端 vue单页面应用刷新网页后vuex的state数据丢失的解决方案(转载)

    最近接手了一个项目,前端后端都要做,之前一直在做服务端的语言.框架和环境,前端啥都不会啊. 突然需要前端编程,两天速成了JS和VUE框架,可惜还是个半吊子.然后遇到了一个困扰了一整天的问题.一直调试都 ...

  8. vue单页面应用刷新网页后vuex的state数据丢失的解决方案

    1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值. 2. 解决思路一种是state里的数据全部是通过请求 ...

  9. ionic2 跳转子页面隐藏底部导航栏

    第一种方法: 在tab里面添加一个属性[tabsHideOnSubPages]='true' <ion-tab [root]="tab1Root" [tabsHideOnSu ...

随机推荐

  1. 010-centos 端口问题

    1.nmap 安装 yum install nmap    #输入y安装 使用 nmap localhost    #查看主机当前开放的端口      nmap -p 1024-65535 local ...

  2. c语言面试宝典(经典,超详细)

    c语言面试宝典(经典,超详细) 2018年08月25日 09:32:19 chengxuyuan997 阅读数:7799   摘自:https://blog.csdn.net/chengxuyuan9 ...

  3. 利用IDEA上传文件到coding仓库 使用git上传文件github

    1.注册帐号 coding官网: https://coding.net/ github官网:https://github.com (以上根据自己需求注册,在下就不帖图了写步骤了) 2.下载 Git g ...

  4. 123456---com.twoapp.ErTongNongChangPinTu---儿童农场拼图

    com.twoapp.ErTongNongChangPinTu---儿童农场拼图

  5. js下利用userData实现客户端保存表单数据

    对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用Cookie技术来实现,这些功能例如:下拉列表框选择的选项,文本框输入的数据等. 事实上,我们可以利用微软DHTML默认行为中 ...

  6. Apache配置优化之开启GZip传输

    1.确保apache已经编译的模块里有mod_deflate模块 2.确保apache的配置文件里引入了压缩的模块 3.确保要开启Gzip压缩的虚拟主机配置里有如下配置,并重启apache服务:如果要 ...

  7. Caché到MySQL数据同步方法!

    随着医疗行业信息化的发展,积累了大量的业务数据,如何挖掘这些数据,实现数据的可视化被提上日程,医院中通常有许多的信息化系统,使用的又都是不同厂商的数据库产品,如何统一汇聚数据,实现数据互通也是一个大问 ...

  8. 理解KNN算法中的k值-knn算法中的k到底指的是什么 ?

    2019-11-09 20:11:26为方便自己收藏学习,转载博文from:https://blog.csdn.net/llhwx/article/details/102652798 knn算法是指对 ...

  9. 【转帖】循序渐进Oracle:数据库的字符集和字符集文件

    循序渐进Oracle:数据库的字符集和字符集文件 https://blog.csdn.net/Enmotech/article/details/100869162 2019年09月15日 18:23: ...

  10. Hadoop的eclipse的插件是怎么安装的?

    [学习笔记] 1)网上下载hadoop-eclipse-plugin-2.7.4.jar,将该jar包拷贝到Eclipse安装目录下的dropins文件夹下,我的目录是C:\Users\test\ec ...