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-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
Vue通过懒加载提升页面响应速度
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
You might like
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php中执行系统命令的方法
2015/03/21 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
用pycharm开发django项目示例代码
2019/06/13 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Django分组聚合查询实例分享
2020/04/29 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
办公室主任先进事迹
2014/01/18 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
运动员获奖感言
2014/08/15 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
招商引资工作汇报
2014/10/28 职场文书
首席执行官观后感
2015/06/03 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Python turtle实现贪吃蛇游戏
2021/06/18 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python