elementui+vue制作导航栏菜单（完整）
⾸先看路由 (我的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事件添加上了捕获异常，所以会通过原型链改变所有相关对象。
replace ⽅法重复跳转错误与上⽅类似，把push改成replace就好。
(最后⼀句是复制别⼈的 ) ----->亲测有效

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。