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编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
python插入排序算法的实现代码
2013/11/21 Python
python重试装饰器示例
2014/02/11 Python
Python实现的选择排序算法示例
2017/11/29 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python有参函数使用代码实例
2020/01/06 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Pandas自定义选项option设置
2021/07/25 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
python装饰器代码解析
2022/03/23 Python