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实现点击当前行变色
Dec 14 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue实现简易音乐播放器
Aug 14 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随机取mysql记录方法小结
2014/12/27 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
分享PHP守护进程类
2015/12/30 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
28个JS验证函数收集
2010/03/02 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JavaScript Split()方法
2015/12/18 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
flask框架路由常用定义方式总结
2019/07/23 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python 如何在字符串中插入变量
2020/08/01 Python
大学生冰淇淋店商业计划书
2014/01/14 职场文书
教师自我反思材料
2014/02/14 职场文书
财务主管岗位职责
2014/02/28 职场文书
《春笋》教学反思
2014/04/15 职场文书
四风问题对照检查材料
2014/09/22 职场文书