vue项目实现设置根据路由高亮对应的菜单项操作
更新时间：2020年08月06日 10:10:25 作者：肾虚少年
这篇文章主要介绍了vue项目实现设置根据路由高亮对应的菜单项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
高亮显示菜单是很常见的一个场景
首先，在router-link标签上绑定对应的路径
然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单
也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路
这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较灵活，如果菜单嵌套很多可以用第二种
补充知识：vuecli项目怎样使用jsx
有时候用jsx写页面可能更灵活，当然在vue中写jsx需要插件的支持
我用了一些官方给出的，感觉不怎么好用，推荐安装这个
安装babel-plugin-transform-vue-jsx插件
看文档安装配置吧
这个配置起来更简单方便
然后在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项目实现设置根据路由高亮对应的菜单项操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue前端对axios的封装和使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
上传文件和下载文件是我们平时经常用到的功能，接下来就让我们用SpringBoot，Vue3和ElementPlus组件实现文件的上传和下载功能吧，感兴趣的朋友跟随小编一起看看吧2023-01-01
过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue 动画效果、过渡效果,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
本文通过实例代码介绍对el-table表格的表头操作方法,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了详解关于vue-area-linkage走过的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决
这篇文章主要介绍了vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于Vue-CLI多页分目录打包的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue 源码解析 --虚拟Dom-render的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了Vue+Element UI实现下拉菜单的封装代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论