場景描述：在頁面中存在頂部導(dǎo)航和左側(cè)導(dǎo)航，左側(cè)導(dǎo)航和右側(cè)內(nèi)容區(qū)使用了命名視圖實現(xiàn)，點擊左側(cè)導(dǎo)航的鏈接時，右側(cè)內(nèi)容區(qū)相應(yīng)顯示不同組件內(nèi)容。問題：在當(dāng)前鏈接手動刷新瀏覽器（例如：瀏覽器地址為/enterprise/list），頂部導(dǎo)航激活項還原到初始狀態(tài)（這里默認是“工作臺”項）。

原理：每次刷新都會重新實例化Vue，也就是會調(diào)用created方法。

<template> <el-menu :default-active='defaultActiveIndex' mode='horizontal' @select='handleSelect' :router='true'> 　 <el-menu-item index='/'>工作臺</el-menu-item><el-menu-item index='/enterpriseManager'>企業(yè)管理</el-menu-item><el-menu-item index='/orderManager'>訂單管理</el-menu-item><el-menu-item index='/systemManager'>系統(tǒng)管理</el-menu-item></el-menu></template><script>export default { name: ’app’, data () { return { defaultActiveIndex: '/' } }, created() { // 組件創(chuàng)建完后獲取數(shù)據(jù)， // 此時 data 已經(jīng)被 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; //獲取當(dāng)前路由 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區(qū)分不同模塊菜單 name: ’home’, redirect: ’/dashboard’, component: Home, menuShow: true, children: [ { path: ’/dashboard’, component: HomeNav, name: ’dashboard’, leaf: true, // 只有一個節(jié)點 iconCls: ’icon-home’, // 圖標樣式class menuShow: true, children: [ { path: ’/dashboard’, component: Dashboard, name: ’首頁’, menuShow: true } ] }, { path: ’/mySet’, component: HomeNav, name: ’我的設(shè)置’, 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, // 只有一個節(jié)點 iconCls: ’icon-home’, // 圖標樣式class menuShow: true, children: [ { path: ’/enterprise/list’, component: EnterpriseList, name: ’企業(yè)列表’, menuShow: true } ] }, { path: ’/enterpriseAdd’, component: EnterpriseNav, name: ’enterpriseAdd’, leaf: true, // 只有一個節(jié)點 iconCls: ’el-icon-menu’, menuShow: true, children: [ { path: ’/enterprise/add’, component: EnterpriseAdd, name: ’企業(yè)添加’, menuShow: true } ] }, { path: ’/enterpriseValidate’, component: EnterpriseNav, name: ’enterpriseValidate’, leaf: true, // 只有一個節(jié)點 iconCls: ’el-icon-menu’, menuShow: true, children: [ { path: ’/enterprise/validate’, component: EnterpriseValidate, name: ’企業(yè)認證’, menuShow: true } ] } ]}]

補充知識：vue手動刷新視圖以及其他小問題

最近把手頭上一個使用angularJS+jquery各種七七八八組件寫的頁面拿vue+elementUI重寫了一邊, 真是極度絲滑, 記錄一些vue和elementUI的小問題

1.如果vue中的數(shù)據(jù)結(jié)構(gòu)比較龐大的話, 十分有可能會出現(xiàn)model更新而視圖不更新/model和視圖都不更新也不報錯的情況, 此時需要手動刷新vue的數(shù)據(jù), 在change或click事件中, 使用this.$forceUpdate()手動刷新視圖

//像這樣 changeSef: function () { //手動刷新視圖 var that = this; that.$forceUpdate(); },

2.在vue中使用setTimeout

//錯誤示范setTimeout(bidOrderInit, 200);//上面那樣是不行的,網(wǎng)上查了下, 大致是說在setTimeout中this指向window對象, //于是乎被定時的方法中就使用不到vue的this對象了//正確示范//可以無視對ie的支持時setTimeout(()=> { this.bidOrderInit();}, 200);//需要兼容ie時setTimeout(function () { this.bidOrderInit();}, 200);

以上這篇Vue頁面手動刷新,實現(xiàn)導(dǎo)航欄激活項還原到初始狀態(tài)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。