antd-vue a-menu菜单绑定路由相关问题

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.push
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}

****** 浏览器刷新/后退 菜单高亮区域：******

完整代码：

关键代码：

注册/**
*在a-menu中设置的:selectedKeys="key"，绑定当前的路由"[$route.path]"
*所以在a-menu-item的key需要做出改变，改为路径
*同时也方便了后续处理点击事件传入的路径
*/

顺便说下菜单的点击事件：

上面好像说了

演示结果：

最后，有说明不清楚的地方欢迎评论指出