Solution to the routing highlighting problem of Vue components

Preface

Before, I used cache to highlight the routes. I would traverse all the routes and highlight the current value of the route each time it was clicked, assigning it the value active. Later I found that it didn't work when I refreshed it, and the highlighted area became the default value 0. Here I mainly talk about the solution to this problem.

The first is by adding the class like this:

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

The second is to monitor the path:

The original code is as follows:

<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 'Microsoft YaHei';
        background: pink;
        background: pink;
        color: white;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        width: 40px;
        background: pink;
        
    }
    .isActive{
            background: blue;
            color:red;
        }
    
}

</style>

Effect:

But if you click refresh, the highlighted index will go to the initialization position 0.

How to solve this problem

One way to do this is by caching sessionStorage. Each click will store it in the cache, refresh it to get the value from the variable, and if the variable has no value, get the value from the cache. But some people may find it troublesome to keep depositing and withdrawing.

Another way is to get the route during initialization and activate the corresponding navigation according to different routes

created(){
            // var path=window.location.hash.slice(2); //This is also acceptable when there is no parameter, but is not recommended var path=this.$route.name //This is recommended 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;
                }
            }
        },

Attachment: Vue clicks on the specific code of the current route highlight

Function display:

Component code:

Add exact to the label

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

<template>
 <nav>
  <ul>
  <li>
   <router-link to="/" exact>blog</router-link>
   <router-link to="/AddBlog" exact>Write a blog</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>

Summarize

This is the end of this article about the solution to the route highlighting problem of vue components. For more relevant route highlighting content of vue components, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vuejs toggle navigation bar highlight (route menu highlight) method example
Vue-route navigation menu bar highlight setting method
Vue-router secondary navigation switching route and highlighting implementation method
Solution to the problem of nested highlighting of Vue routes
Secondary routing highlighting problem and configuration method in vue2
Vue clicks on the current route to highlight a small example
The Vue project implements the setting of menu items corresponding to the route highlighting
A brief discussion on the nesting of secondary routes and highlighting of secondary routes in Vue

<<: How to check the version of Kali Linux system

>>: MySQL Community Server 8.0.11 installation and configuration method graphic tutorial