antd-vue a-menu菜单绑定路由相关问题
tips: 路由绑定、菜单跳转、网页后退高亮显示
1. 问题描述
使用antd-vue 的 a-布局和a-menu菜单做一个侧边栏菜单，加入vuex配置侧边栏点击事件，实现点击菜单改变路由展示中间部分内容的功能
但是出现了问题：
2. 解决方法
对路由变化进行判断/修改 的push与方法
借助a-menu 的属性：:绑定路由地址，就能实现随着路由产生变化
3. 代码
****** 重复点击报错解决：******
方法1：对路径进行判断
methods: {handelClick(item) {//判断点击路径与点击菜单路径是否不同//有效避免重复替换相同路径if (item.key !== this.$route.path) {this.$router.push(item.key)console.log(this.$route.path)console.log(item)}}}
方法2：在main.js中添加代码
import VueRouter from 'vue-router'Vue.use(VueRouter)const originalReplace = VueRouter.prototype.replace;VueRouter.prototype.replace = function replace(location) {return originalReplace.call(this, location).catch(err => err);};const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}
****** 浏览器刷新/后退 菜单高亮区域：******
完整代码：
注册登录忘记密码 (collapsed = !collapsed)"/>登录注册模块
关键代码：
文章插图
注册/***在a-menu中设置的:selectedKeys="key"，绑定当前的路由"[$route.path]"*所以在a-menu-item的key需要做出改变，改为路径*同时也方便了后续处理点击事件传入的路径*/顺便说下菜单的点击事件：
上面好像说了
演示结果：
【antd-vue a-menu菜单绑定路由相关问题】最后，有说明不清楚的地方欢迎评论指出