vue组件的路由高亮问题解决方法


Posted in Vue.js onMay 11, 2021

前言

之前我对于路由的高亮都是使用缓存,给他的所有路由遍历一遍,每点击一下的时候,给他的当前值高亮,赋值active。后来发现一刷新就不行,高亮的就变成默认值0了,这里主要是讲这个问题的解决办法。

第一种是通过这样的添加类:

.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;
        }
    }

第二种是监听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>

效果:

vue组件的路由高亮问题解决方法

但如果点击刷新会这样:高亮的Index跑到了初始化0的位置。

vue组件的路由高亮问题解决方法

如何解决这种问题

有一种方法是通过缓存sessionStorage。每次点击一下就存入缓存,刷新就从变量取值,变量没有值就从缓存取值。但一直存一直取可能有的人觉得麻烦。

还有一种方法就是初始化的时候获取路由,根据不同的路由激活对应的导航

created(){
            // var path=window.location.hash.slice(2);//没有参数时这种写法也可以,不推荐
            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点击当前路由高亮的具体代码

 

功能展示:

vue组件的路由高亮问题解决方法

组件代码:

标签上加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>

总结

到此这篇关于vue组件的路由高亮问题解决方法的文章就介绍到这了,更多相关vue组件的路由高亮内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
You might like
PHP 文件类型判断代码
2009/03/13 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python机器学习实战之树回归详解
2017/12/20 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python实现AES加密与解密
2019/03/28 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
CSS3 简写animation
2012/05/10 HTML / CSS
医学生个人求职信范文
2013/09/24 职场文书
教育科研先进个人材料
2014/01/26 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技