vue项目实现设置根据路由高亮对应的菜单项操作


Posted in Javascript onAugust 06, 2020

高亮显示菜单是很常见的一个场景

首先,在router-link标签上绑定对应的路径

vue项目实现设置根据路由高亮对应的菜单项操作

然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单

vue项目实现设置根据路由高亮对应的菜单项操作

也可以在router路由数组里面设置meta信息,然后根据这个信息来判断是否高亮(这里可以循环生成菜单,不过我没有写)只是说一下思路

vue项目实现设置根据路由高亮对应的菜单项操作

vue项目实现设置根据路由高亮对应的菜单项操作

这样即可根据路由实现对应的菜单高亮了,我个人认为第二种比较灵活,如果菜单嵌套很多可以用第二种

补充知识:vuecli项目怎样使用jsx

有时候用jsx写页面可能更灵活,当然在vue中写jsx需要插件的支持

我用了一些官方给出的,感觉不怎么好用,推荐安装这个

安装babel-plugin-transform-vue-jsx插件

GitHub地址

看文档安装配置吧

这个配置起来更简单方便

然后在vue文件组件里面写

以下就是简单的jsx语法,不熟悉的可以去看看react的一些基础,当然,大多数时候模板也是很好用的

而且vue中的方法自动绑定了this,感觉混用也不错

<script>
export default {
  name: "MyJsx",
  data () {
    return {
      msg: 'hello vue-jsx'
    };
  },
  methods: {
    handleClick () {
      console.log(this);
    }
  },
  render () {
    return (
      <div on-click={this.handleClick}>{this.msg}</div>
    )
  }
};
</script>

以上这篇vue项目实现设置根据路由高亮对应的菜单项操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
Javascript中this的用法详解
Sep 22 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 #Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 #Javascript
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 #Javascript
javascript实现页面的实时时钟显示示例
Aug 06 #Javascript
Javascript如何递归遍历本地文件夹
Aug 06 #Javascript
通过vue刷新左侧菜单栏操作
Aug 06 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
Python中os.path用法分析
2015/01/15 Python
python绘制立方体的方法
2018/07/02 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
基于Django统计博客文章阅读量
2019/10/29 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
宝信软件JAVA工程师面试经历
2012/08/19 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
离职证明标准格式
2014/09/15 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Javascript webpack动态import
2022/04/19 Javascript