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使用预渲染代替SSR的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了Vue-router编程式导航的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
下面小编就为大家分享一篇vue.js给动态绑定的radio列表做批量编辑的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
在项目开发中有时候需求需要手动实现横屏功能,所以这篇文章主要为大家详细介绍了如何使用Vue实现手机横屏功能,需要的小伙伴可以参考一下2024-03-03
下面小编就为大家分享一篇vue2.0安装style/css loader的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在本篇文章里小编给大家整理的是关于vue实现百度语音合成的实例内容，以及相关代码，需要的朋友们参考下。2019-10-10
elementui el-upload一次请求上传多个文件的实现
使用ElementUI Upload的时候发现如果是默认方案,上传多张图片并不是真正的一次上传多张,本文就来介绍一下elementui el-upload一次请求上传多个文件的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Electron集成React和Vue的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了axios+Vue上传文件显示进度效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
应用会对用户的操作进行反馈，就叫响应式，数据变化会实时改变UI，就叫数据响应式，修改Vue实例中的数据时，视图会重新渲染，就是Vue的数据响应式2022-05-05
最新评论