場景描述：在頁面中存在頂部導航和左側導航，左側導航和右側內容區使用了命名檢視實現，點選左側導航的連結時，右側內容區相應顯示不同元件內容。問題：在當前連結手動重新整理瀏覽器（例如：瀏覽器地址為/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',name: '我的設定',iconCls: 'el-icon-menu',children: [
    { path: '/mySet/plan',component: Plan,name: '行程計劃',menuShow: true },{ path: '/mySet/maillist',component: Maillist,name: '通訊錄',menuShow: true }
   ]
  }
 ]
},{
 path: '/enterpriseManager',type: 'enterprise',name: 'enterprise',redirect: '/enterprise/list',children: [
  {
   path: '/enterpriseList',component: EnterpriseNav,name: 'enterpriseList',children: [
    { path: '/enterprise/list',component: EnterpriseList,name: '企業列表',{
   path: '/enterpriseAdd',name: 'enterpriseAdd',// 只有一個節點
   iconCls: 'el-icon-menu',children: [
    { path: '/enterprise/add',component: EnterpriseAdd,name: '企業新增',{
   path: '/enterpriseValidate',name: 'enterpriseValidate',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頁面手動重新整理,實現導航欄啟用項還原到初始狀態就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。