中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

Vue頁面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)的方法-創(chuàng)新互聯(lián)

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

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

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

原理:每次刷新都會(huì)重新實(shí)例化Vue,也就是會(huì)調(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ù),
  // 此時(shí) 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頁面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)的方法-創(chuàng)新互聯(lián)
URL地址:http://m.rwnh.cn/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)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
大宁县| 徐汇区| 临猗县| 常德市| 水富县| 宝清县| 嘉义市| 隆化县| 读书| 乌审旗| 凭祥市| 宁晋县| 迁西县| 松桃| 乐清市| 博爱县| 渭南市| 湘潭县| 濉溪县| 汉寿县| 化州市| 墨竹工卡县| 尼勒克县| 安吉县| 石渠县| 波密县| 常宁市| 新昌县| 禹州市| 临猗县| 绥宁县| 丽水市| 泾川县| 东乌珠穆沁旗| 汉寿县| 应用必备| 吴江市| 铁岭市| 门源| 莱芜市| 万源市|