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页面手动刷新,实现导航栏激活项还原到初始状态就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7045.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注