antd-vue a-menu如何实现与Vue Router路由的深度绑定和智能跳转？

本文共计977个文字，预计阅读时间需要4分钟。

目录

1.问题描述

2.解决方法

3.代码

Tips: 路由绑定、菜单跳转、网页后退高亮显示

1.问题描述

使用antd-vue的a-layout布局和a-menu菜单制作一个侧边栏菜单，点击菜单项后需要添加vuex配置来处理点击事件。

2. 解决方法- 使用a-layout和a-menu组件创建侧边栏。- 使用vuex管理侧边栏的选中状态。- 监听菜单项的点击事件，更新vuex状态。

3. 代码vue 首页 关于 联系我们

目录

• 1. 问题描述
• 2. 解决方法
• 3. 代码

tips: 路由绑定、菜单跳转、网页后退高亮显示

1. 问题描述

使用antd-vue 的 a-layout布局和a-menu菜单做一个侧边栏菜单，加入vuex配置侧边栏点击事件，实现点击菜单改变路由展示中间部分内容的功能

但是出现了问题：

• 重复点击路由报错
• 浏览器刷新/后退 菜单高亮区域没有根据路由的变化产生变化

2. 解决方法

• 对路由变化进行判断/修改router 的push与replace方法
• 借助a-menu 的属性：:selectedKeys绑定路由地址，就能实现随着路由产生变化

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) } ****** 浏览器刷新/后退 菜单高亮区域：******

完整代码：

<template>   <a-layout id="components-layout-demo-custom-trigger">     <a-layout-sider v-model="collapsed" :trigger="null" collapsible>       <div class="logo" />       <a-menu theme="dark"               mode="inline"               @click="handelClick"               :selectedKeys="[$route.path]"       >           <a-menu-item key='/register'>           <a-icon type="user" />           <span>注册</span>         </a-menu-item>         <a-menu-item key='/login'>           <a-icon type="login" />           <span>登录</span>         </a-menu-item>         <a-menu-item key='/modify'>           <a-icon type="reload" />           <span>忘记密码</span>         </a-menu-item>       </a-menu>     </a-layout-sider>     <a-layout>       <a-layout-header style="background: #fff; padding: 0">         <a-icon             class="trigger"             :type="collapsed ? 'menu-unfold' : 'menu-fold'"             @click="() => (collapsed = !collapsed)"         />           <span>登录注册模块</span>       </a-layout-header>       <a-layout-content           :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"       >         <router-view></router-view>       </a-layout-content>     </a-layout>   </a-layout> </template>

<script> export default {   name: 'Body',   data() {     return {       collapsed: false     };   },   mounted() {     this.$router.push('/register')   },   methods: {     handelClick(item) {       if (item.key !== this.$route.path) {         this.$router.push(item.key)         //console.log(this.$route.path)         //console.log(item)       }     }   } } </script>

<style> #components-layout-demo-custom-trigger {   height: 100%; } #components-layout-demo-custom-trigger .trigger {   font-size: 18px;   line-height: 64px;   padding: 0 24px;   cursor: pointer;   transition: color 0.3s; }   #components-layout-demo-custom-trigger .trigger:hover {   color: #1890ff; }   #components-layout-demo-custom-trigger .logo {   height: 32px;   background: rgba(255, 255, 255, 0.2);   margin: 16px; }   </style>

关键代码：

<a-menu theme="dark"               mode="inline"               :default-selected-keys="['1']"               @click="handelClick"               :selectedKeys="[$route.path]"       >           <a-menu-item key='/register'>           <a-icon type="user" />           <span>注册</span>         </a-menu-item>   /** *在a-menu中设置的:selectedKeys="key"，绑定当前的路由"[$route.path]" *所以在a-menu-item的key需要做出改变，改为路径 *同时也方便了后续处理点击事件传入的路径 */

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

上面好像说了

演示结果：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。