這篇文章給大家分享的是有關(guān)Vue頁面手動刷新，實現(xiàn)導(dǎo)航欄激活項還原到初始狀態(tài)的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、沈河網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城開發(fā)、集團公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為沈河等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

場景描述：在頁面中存在頂部導(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)（這里默認(rèn)是“工作臺”項）。

原理：每次刷新都會重新實例化Vue，也就是會調(diào)用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">企業(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>

當(dāng)前文章：Vue頁面手動刷新，實現(xiàn)導(dǎo)航欄激活項還原到初始狀態(tài)的方法-創(chuàng)新互聯(lián)
URL地址：http://www.chinadenli.net/article32/dosspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、云服務(wù)器、電子商務(wù)、網(wǎng)站制作、靜態(tài)網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)