vue組件的路由高亮問題解決方法

更新時(shí)間：2021年05月11日 11:28:49 作者：口袋の的天空

這篇文章主要給大家介紹了關(guān)于vue組件的路由高亮問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

之前我對(duì)于路由的高亮都是使用緩存，給他的所有路由遍歷一遍，每點(diǎn)擊一下的時(shí)候，給他的當(dāng)前值高亮，賦值active。后來發(fā)現(xiàn)一刷新就不行，高亮的就變成默認(rèn)值0了，這里主要是講這個(gè)問題的解決辦法。

第一種是通過這樣的添加類：

.router{
        font: 12px/40px '微軟雅黑';
        background: pink;
        background: pink;
        color: white;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        width: 40px;
        background: pink;
        &.isActive{
            background: blue;
            color:red;
        }
    }

第二種是監(jiān)聽path：

原本的代碼是這樣的：

<template>
<div id="main">
    <ul style="height:40px;background:pink;">
        <li  class="router" v-for="(item,index) in items" :key="index" style="float:left;" :class="item.isActive?'isActive':''" @click="routerTo(item,index)">
            <span >{{item.name}}</span>
        </li>
    </ul>
    <router-view></router-view>
    </div>
    
</template>
<script>
    export default {
        data () {
            return {
                activeIndex2:'0',
                items:[
                    {name:'twoPage',code:'twoPage',path:'/twoPage',defaultIcon:require('@/assets/icon/BehaviorRank-default.png'),
                    activeIcon:require('@/assets/icon/behaviorrank-active.png'),isActive:true},
                    {name:'three',code:'three',path: '/three',defaultIcon:require('@/assets/icon/ChannelAllocation-default.png'),
                    activeIcon:require('@/assets/icon/ChannelAllocation-active.png'),isActive:false},
                    {name:'four',code:'four',path:'/four',defaultIcon:require('@/assets/icon/myReport-default.png'),
                    activeIcon:require('@/assets/icon/myReport-active.png'),isActive:false},
                ],
            }
        },
        methods:{
            routerTo(item,index) {
                 for (let i = 0; i < this.items.length; i++) {
                    this.items[i].isActive=false
                    
                }
                this.items[index].isActive=true
                this.$router.push({name:item.name})
               
            },
        }
    }
</script>
<style lang='less'>
#main{
    .router{
        font: 12px/40px '微軟雅黑';
        background: pink;
        background: pink;
        color: white;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        width: 40px;
        background: pink;
        
    }
    .isActive{
            background: blue;
            color:red;
        }
    
}

</style>

效果：

但如果點(diǎn)擊刷新會(huì)這樣：高亮的Index跑到了初始化0的位置。

如何解決這種問題

有一種方法是通過緩存sessionStorage。每次點(diǎn)擊一下就存入緩存，刷新就從變量取值，變量沒有值就從緩存取值。但一直存一直取可能有的人覺得麻煩。

還有一種方法就是初始化的時(shí)候獲取路由，根據(jù)不同的路由激活對(duì)應(yīng)的導(dǎo)航

created(){
            // var path=window.location.hash.slice(2);//沒有參數(shù)時(shí)這種寫法也可以，不推薦
            var path=this.$route.name//推薦這種
            console.log(path)
            if(path){
                for (let i = 0; i < this.items.length; i++) {
                    this.items[i].isActive=false
                }
                switch(path){
                    case 'twoPage':
                    this.items[0].isActive=true;
                    break;
    
                    case 'three':
                    this.items[1].isActive=true;
                    break;
    
                    case 'four':
                    this.items[2].isActive=true;
                    break;
                }
            }
        },

附：vue點(diǎn)擊當(dāng)前路由高亮的具體代碼

功能展示：

組件代碼：

標(biāo)簽上加exact

.router-link-active{
 background: rgba(255,255,255,0.8);
 color: gray;
 }

<template>
 <nav>
  <ul>
  <li>
   <router-link to="/" exact>博客</router-link>
   <router-link to="/AddBlog" exact>寫博客</router-link>
  </li>
  </ul>
 </nav>
</template>
 
<script>
 export default {
  name: "bolgheader"
 }
</script>
 
<style scoped>
 ul{
 list-style-type: none;
 text-align: center;
 margin:0;
 }
 li{
 display: inline-block;
 margin:0 10px;
 }
 a{
 color:rgb(102, 119, 204);
 text-decoration: none;
 padding:12px;
 border-radius: 5px;
 font-size:20px;
 }
 nav{
 background: #eee;
 padding: 30px 0;
 margin-bottom: 40px;
 }
 .router-link-active{
 background: rgba(255,255,255,0.8);
 color: gray;
 }
</style>

總結(jié)

到此這篇關(guān)于vue組件的路由高亮問題解決方法的文章就介紹到這了,更多相關(guān)vue組件的路由高亮內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: