关于antd-vue a-menu菜单绑定路由的相关问题
作者:晚上八点半 发布时间:2023-07-02 16:33:12
标签:antd-vue,a-menu菜单,路由
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需要做出改变,改为路径
*同时也方便了后续处理点击事件传入的路径
*/
顺便说下菜单的点击事件:
上面好像说了
演示结果:
来源:https://blog.csdn.net/weixin_45259917/article/details/120131112
0
投稿
猜你喜欢
- 从最简单的Web浏览器的登录界面开始,登录界面如下:进行Web页面自动化测试,对页面上的元素进行定位和操作是核心。而操作又是以定位为前提的,
- 自己有一套模块化的思路,想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的,从我接收第一个po
- 学一门新技术或者新语言,我们都要首先学会如何去适应这们新技术,其中在适应过程中,我们必须得学习如何调试程序并打出相应的log信息来,正所谓“
- 在numpy中的ndarry是一个数组,因此index就是位置下标,注意下标是从0开始增加:在插入时使用np.insert(),在末尾添加时
- 当然是可以的,而且非常简单,今天就教大家在ASP中不用模板生成HTML静态页的方法。这里假设有一个htmer.asp动态页面,你想把它生成为
- 注意:本示例仅供学习参考~混淆原理出于某种原因,明文信息通过自定义字体进行渲染,达到混淆目的。举个例子:网页源码 <p>123&
- 代码如下:Class XMLClass Private objXml Private xmlDoc Private xmlPath '
- 其中一种原因:pycharm没有设置系统解析器解决方法打开pycharm->File->Settings->Project
- 由于数据存放在大数据平台的Hive数据仓库中,我需要在Win10系统上利用Python3连接Hive,然后读取数据,进行探索、分析和挖掘工作
- 本文实例讲述了Python3实现的字典、列表和json对象互转功能。分享给大家供大家参考,具体如下:python3可以使用json模块操作j
- 在网页中放iframe,如果frameborder=0;就没有边框显示了;但动态创建时,在IE7中就不行了,从网上找到解决的办法,写出来记录
- 关于django celery的使用网上有很多文章,本文就不多做更多的说明。本文使用版本python==3.8.15Django==3.2.
- 1、设置无头浏览器模式from selenium import webdriverfrom selenium.webdriver.chrom
- 你是否对获得MySQL数据库与表的最基本命令的实际操作感到十分头疼?如果是这样子的话,以下的文章将会给你相应的解决方案,以下的文
- 通过列表生成式,我们可以直接创建一个列表。但是,受到内存限制,列表容量肯定是有限的。而且,创建一个包含100万个元素的列表,不仅占用很大的存
- 表结构: CREATE TABLE [dbo].[Xtest]( [ID] [bigint] IDENTITY(1,1) NOT NULL,
- 本文实例讲述了php指定长度分割字符串str_split函数用法。分享给大家供大家参考,具体如下:示例1:$str = 'abcde
- 文档介绍利用python写“猜数字”,“猜词语”,“谁是卧底”这三个游戏,从而快速掌握python编程的入门知识,包括python语法/列表
- 前言网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或
- 目录实现加权轮询负载均衡思路加权轮询负载均衡代码测试代码实现加权轮询负载均衡思路代码实现一个加权负载均衡Weight