element ui+vue制作导航栏菜单（完整）

最新推荐文章于 2025-03-06 13:16:05 发布

执着菜鸟一颗心

最新推荐文章于 2025-03-06 13:16:05 发布

阅读量2.1w

点赞数 7

本文链接：https://blog.youkuaiyun.com/kbdmy/article/details/106902055

版权

本文详细介绍了在Vue项目中如何配置路由和左侧导航，重点讲解了如何在Home组件下注册所有可用导航页面的路由配置，并解决了重复点击同一导航项导致的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看路由 (我的vue文件是随便创建的不标准注意了,这里只是为了让大家看一下路由)
因为内容部分以及头部部分都是基于主页面的,所以所有可用左侧导航的页面router配置我都放在了Home下面注册(也可能自己理解的不对希望大家指正)

Home主要使用饿了么页面布局的第四个如下图: 大家有需要的可以自己选择这里都不过多解释了以下就是Home页面也是主页面
在这里插入图片描述
以下是左侧导航配置

最后呈现一下最终页面

当你点击二级菜单之后进行刷新页面加载之后所选二级菜单依旧会高亮这就是第一幅图中 :default-active="$route.path"的作用

再补充一点当我重复点击选中的导航是报如下错误我去找了一下原因应该是重复进入同一路由
在这里插入图片描述
解决方法:
为跳转错误的方法全局加上错误捕获。
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
return routerPush.call(this, location).catch(error => error)
}
以上代码在main.js，或者router/index.js 下执行，以及new VueRouter之前之后都一样。因为是重置的VueRouter原型对象上的push事件，给原型对象的push事件添加上了捕获异常，所以会通过原型链改变所有相关对象。