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

Leonie ·
更新时间:2024-11-01
· 551 次阅读

目录

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需要做出改变,改为路径 *同时也方便了后续处理点击事件传入的路径 */

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

上面好像说了

演示结果:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持软件开发网。



VUE antd 路由

需要 登录 后方可回复, 如果你还没有账号请 注册新账号