南强小屋 Design By 杰米
高亮显示菜单是很常见的一个场景
首先，在router-link标签上绑定对应的路径
然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单
也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路
这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较灵活，如果菜单嵌套很多可以用第二种
补充知识：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项目实现设置根据路由高亮对应的菜单项操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
vue,路由高亮,菜单项
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无vue项目实现设置根据路由高亮对应的菜单项操作的评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。