前言
在 Nuxt.js 后台管理项目中,引入了 Ant Design Vue 组件库,使用 /
组件当导航菜单,当点击菜单时,跳转到对应的路由页面,遇到页面刷新时,能自动高亮当前菜单。
网上没有该框架的相关教程文章,本文将从 0-1 完成该功能,代码干净整洁且注释详细,
给您提供了整个示例的源代码,一路复制代码,最后稍微改改即可。
示例代码仅包含核心功能,无烂七八糟的样式和没用的变量,
如下图所示,无论是 点击菜单还是页面切换或刷新,都能 “精准” 的高亮对应菜单:
如果您不想一步步复制代码,可以直接滑动到文章最底部,直接 克隆 Gitee 仓库运行起来 即可。
强烈建议您新建一个干净的 Nuxt.js 项目,这更有利于您跟着步骤一步步搞,
创建完毕运行起来,删除一些没用的组件和页面,留个 index.vue
首页即可,
创建项目不会的话,可以参考