国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue Element ui導(dǎo)航欄選中高亮,刷新后選中消失

這篇具有很好參考價(jià)值的文章主要介紹了Vue Element ui導(dǎo)航欄選中高亮,刷新后選中消失。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

側(cè)邊菜單

導(dǎo)航欄選中后重新刷新頁(yè)面會(huì)發(fā)現(xiàn)選中的導(dǎo)航欄高亮消失了,或者跳到了其它選項(xiàng),這里的思路就是定義方法,把路由存入到sessionStorage,頁(yè)面重新加載的時(shí)候從sessionStorage中獲取文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-614036.html

<!--側(cè)邊菜單-->
         <el-menu :default-active="active" class="el-menu-vertical-demo" router>

            <router-link to="/user" style="text-decoration: none">
              <el-menu-item index="/user" v-if="isflag" @click="selectMenuItem('/user')"> 
                <el-icon><User /></el-icon>
                <span>User Information</span>
              </el-menu-item>
            </router-link>

            <el-menu-item index="order" v-if="isflag" @click="selectMenuItem('order')">
              <el-icon><Tickets /></el-icon>
              <span>Order Management</span>
            </el-menu-item>

            <el-menu-item index="manage" v-if="userInfo.rolename=='op' ? false : true" @click="selectMenuItem('manage')">
              <el-icon><Reading /></el-icon>
              <span>Task Management</span>
            </el-menu-item>

            <el-menu-item index="task" v-if="isflag" @click="selectMenuItem('task')">
              <el-icon><Calendar /></el-icon>
              <span>Schedule</span>
            </el-menu-item>
          </el-menu>
  data() {
    return {
      active: "/user",
    };
  },
mounted(){
    this.active =  window.sessionStorage.getItem("activerouter");
  },
  methods: {
    selectMenuItem(path) {
      this.active = path
      window.sessionStorage.setItem("activerouter", path);
    },
   } 

到了這里,關(guān)于Vue Element ui導(dǎo)航欄選中高亮,刷新后選中消失的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • vue + element ui 實(shí)現(xiàn)側(cè)邊欄導(dǎo)航欄折疊收起

    vue + element ui 實(shí)現(xiàn)側(cè)邊欄導(dǎo)航欄折疊收起

    首頁(yè)布局如下 要求點(diǎn)擊按鈕,將側(cè)邊欄收縮, 通過 row 和 col 組件,并通過 col 組件的 span 屬性我們就可以自由地組合布局。 側(cè)邊欄代碼 ?效果 補(bǔ)充路由: ? ?

    2024年02月11日
    瀏覽(33)
  • vue2+element-ui實(shí)現(xiàn)側(cè)邊導(dǎo)航欄

    編寫 client/src/components/LeftMenu.vue ,創(chuàng)建側(cè)邊導(dǎo)航欄: 編輯 client/src/views/Index.vue ,引入側(cè)邊導(dǎo)航欄:

    2024年02月02日
    瀏覽(30)
  • 用vue實(shí)現(xiàn)點(diǎn)擊選中高亮效果

    用vue實(shí)現(xiàn)點(diǎn)擊選中高亮效果

    1、代碼 2、效果

    2024年02月16日
    瀏覽(23)
  • Vue結(jié)合element-ui實(shí)現(xiàn)導(dǎo)航菜單展開收縮小功能

    Vue結(jié)合element-ui實(shí)現(xiàn)導(dǎo)航菜單展開收縮小功能

    1. 先上個(gè)效果圖? ? 這里我把控制菜單收縮的放在中間了,是可以隨便調(diào)整的。? 2. 問題思路想法? ① 首先是布局,這就是個(gè)很經(jīng)典的后臺(tái)管理系統(tǒng)的容器頁(yè)面,這里分為上下結(jié)構(gòu),上面一般放些系統(tǒng)logo、?登錄的用戶信息,還有一些小功能等等。然后下面又分為左右結(jié)構(gòu),

    2024年02月16日
    瀏覽(23)
  • 【Vue Element-ui el-table組件 實(shí)現(xiàn)跨分頁(yè)全選 可全選中當(dāng)前頁(yè) 也可選中全量數(shù)據(jù)】

    前端模擬數(shù)據(jù)示例,無(wú)需后臺(tái)接口,復(fù)制粘貼即可看到效果。 element-ui table里的全選功能只會(huì)全選當(dāng)前頁(yè)的所有數(shù)據(jù) 當(dāng)table有分頁(yè)功能的時(shí)候?qū)崿F(xiàn)跨頁(yè)全選 ①為table添加select方法(當(dāng)用戶手動(dòng)勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的事件) 兩個(gè)參數(shù) selection,row 選中的數(shù)據(jù) 最后一個(gè)選中

    2024年02月02日
    瀏覽(46)
  • vue+iView 動(dòng)態(tài)側(cè)邊欄菜單保持高亮選中

    vue+iView 動(dòng)態(tài)側(cè)邊欄菜單保持高亮選中

    iview 組件在使用過程中,多多少少有一些小坑,本文簡(jiǎn)單羅列一二: 避坑指南: 關(guān)于iview 側(cè)邊欄菜單未能展開高亮選中回顯問題 應(yīng)用場(chǎng)景:iview-admin下接入動(dòng)態(tài)菜單后,刷新或鏈接跳入時(shí)回顯失效 簡(jiǎn)單就是兩個(gè)方面:動(dòng)態(tài)菜單接入前和動(dòng)態(tài)菜單接入后菜單保持高亮選中問題

    2024年02月07日
    瀏覽(17)
  • 【Vue.js】使用Element中的Mock.js搭建首頁(yè)導(dǎo)航&左側(cè)菜單---【超高級(jí)教學(xué)】

    【Vue.js】使用Element中的Mock.js搭建首頁(yè)導(dǎo)航&左側(cè)菜單---【超高級(jí)教學(xué)】

    ? ? ? Mock.js是一個(gè)用于前端開發(fā)中生成隨機(jī)數(shù)據(jù)、模擬接口響應(yīng)的 JavaScript 庫(kù)。模擬數(shù)據(jù)的生成器,用來(lái)幫助前端調(diào)試開發(fā)、進(jìn)行前后端的原型分離以及用來(lái)提高自動(dòng)化測(cè)試效率 總結(jié)來(lái)說(shuō),Element中的Mock.js是一個(gè)用于前端開發(fā)中生成隨機(jī)數(shù)據(jù)、模擬接口響應(yīng)的庫(kù)。它可以幫助

    2024年02月07日
    瀏覽(45)
  • vue后臺(tái)項(xiàng)目左側(cè)菜單欄配合element-ui中tag標(biāo)簽實(shí)現(xiàn)多標(biāo)簽頁(yè)導(dǎo)航欄

    vue后臺(tái)項(xiàng)目左側(cè)菜單欄配合element-ui中tag標(biāo)簽實(shí)現(xiàn)多標(biāo)簽頁(yè)導(dǎo)航欄

    效果圖 第一步:設(shè)置左側(cè)菜單欄 左側(cè)菜單欄,左側(cè)菜單我這邊自定義寫死的數(shù)據(jù)。 分為有子菜單和沒子菜單等情況,我用到的只有倆種,沒有三級(jí)菜單。 HTML部分

    2024年02月11日
    瀏覽(38)
  • Vue+JS+Element UI實(shí)戰(zhàn)(電商項(xiàng)目1)

    Vue+JS+Element UI實(shí)戰(zhàn)(電商項(xiàng)目1)

    目錄 1.電商業(yè)務(wù)概述 2.電商后臺(tái)管理系統(tǒng)的功能 ?3.項(xiàng)目初始化步驟 4.后臺(tái)項(xiàng)目的環(huán)境安裝配置 4.1. API V1 接口說(shuō)明 4.2. 支持的請(qǐng)求方法 4.3. 通用返回狀態(tài)說(shuō)明 5.測(cè)試后臺(tái)接口是否正常 6.登錄/退出功能 1.登錄概述 1.登錄業(yè)務(wù)流程 2.登錄業(yè)務(wù)的相關(guān)技術(shù)點(diǎn) 3.token原理 ?2.登錄功能

    2024年02月05日
    瀏覽(23)
  • 使用 Element UI 和 Vue.js 搭建電商商城系統(tǒng)

    作者:禪與計(jì)算機(jī)程序設(shè)計(jì)藝術(shù) 電商商城系統(tǒng)作為傳統(tǒng)互聯(lián)網(wǎng)行業(yè)的標(biāo)桿,在近幾年已經(jīng)成為各大公司必不可少的業(yè)務(wù)系統(tǒng)之一。但是,構(gòu)建一個(gè)成熟的電商商城系統(tǒng)仍然具有諸多挑戰(zhàn)。例如,功能模塊繁多、用戶交互復(fù)雜、界面呈現(xiàn)效果豐富、數(shù)據(jù)量大等。為了解決這些問

    2024年02月08日
    瀏覽(27)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包