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

原理：每次刷新都會重新實例化Vue，也就是會調用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'>企業管理</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頁面手動刷新,實現導航欄激活項還原到初始狀態就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。