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的无限级联下拉框js插件
Oct 29 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
js中的数组对象排序分析
Dec 11 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 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
php隐藏实际地址的文件下载方法
2015/04/18 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
JavaScript File分段上传
2016/03/10 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
新东网科技Java笔试题
2012/07/13 面试题
西安当代医院管理研究院笔试题
2015/12/11 面试题
环保建议书200字
2014/05/14 职场文书
环保建议书500字
2014/05/14 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
JavaScript实现音乐播放器
2022/08/14 Javascript