您当前的位置: 首页 > 

王佳斌

暂无认证

  • 1浏览

    0关注

    821博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

Nuxt - Ant Design Vue 组件库 Munu 导航菜单 <a-menu> 配合路由使用教程,点击菜单跳转到对应路由(刷新或切换页面后,自动选中高亮对应到当前菜单上)超详细教程

王佳斌 发布时间:2022-09-04 15:12:36 ,浏览量:1

前言

在 Nuxt.js 后台管理项目中,引入了 Ant Design Vue 组件库,使用 / 组件当导航菜单,当点击菜单时,跳转到对应的路由页面,遇到页面刷新时,能自动高亮当前菜单。

网上没有该框架的相关教程文章,本文将从 0-1 完成该功能,代码干净整洁且注释详细,

给您提供了整个示例的源代码,一路复制代码,最后稍微改改即可。

示例代码仅包含核心功能,无烂七八糟的样式和没用的变量,

如下图所示,无论是 点击菜单还是页面切换或刷新,都能 “精准” 的高亮对应菜单:

在这里插入图片描述

准备阶段

如果您不想一步步复制代码,可以直接滑动到文章最底部,直接 克隆 Gitee 仓库运行起来 即可。

强烈建议您新建一个干净的 Nuxt.js 项目,这更有利于您跟着步骤一步步搞,

创建完毕运行起来,删除一些没用的组件和页面,留个 index.vue 首页即可,

创建项目不会的话,可以参考

关注
打赏
1665568777
查看更多评论
立即登录/注册

微信扫码登录

0.0449s