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>

라우터 구성 형식 첨부:

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의 각종 7, 8, 8 구성 요소를 사용하여 쓴 페이지를 vue+elementUI로 다시 썼는데 정말 매끄러워서 vue와 elementUI의 사소한 문제를 기록한다
1. 만약에 vue의 데이터 구조가 비교적 방대하다면 모델 업데이트가 나타날 가능성이 높고 보기가 업데이트되지 않고/모델과 보기가 업데이트되지 않고 틀리지 않을 수 있습니다. 이때 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 페이지를 수동으로 리셋하여 네비게이션 표시줄 활성화 항목을 초기 상태로 복원하는 것이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.