【vue3+elementplus】解决切换el-menu-item，el-menu组件会抖动的问题

最新推荐文章于 2024-08-26 16:46:51 发布

湛海不过深蓝

最新推荐文章于 2024-08-26 16:46:51 发布

阅读量1.3k

点赞数

分类专栏： elementuiPlus vue3+ts 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/bbt953/article/details/132184439

版权

vue3+ts 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

elementuiPlus

19 篇文章 0 订阅

订阅专栏

文章讨论了在Vue应用中，使用el-menu子组件时，如何避免因路由切换导致的页面抖动。作者发现问题在于app.vue中的router-view全局刷新，解决方案是在内容区的router-view上添加key属性，仅更新需要的部分。

摘要由CSDN通过智能技术生成

el-menu作为子组件，当执行router.push后，el-menu的生命周期确实会重新加载，但是浏览器页面中的menu部分不应该让用户感知到抖动刷新

原因: 为了切换路由时页面要刷新，在router-view上加了key，但是app.vue中的router-view是根页面，实际只需要内容区刷新即可

// app.vue
<router-view :key="route.path" />

解决：在内容区的router-view上加key，而不是app.vue

// index.vue
<div class="root">
	<header />
  	<div class="app-wrapper">
   		<Sidebar class="sidebar-container" />
    	<div class="main-container">
      		<Breadcrumb />
      		<router-view :key="route.path"></router-view>
    	</div>
   	</div>
</div>