用ElementPlus开发el-tab结合router-view调用组件时需要注意多次渲染的问题

最新推荐文章于 2025-03-22 09:44:36 发布
原创 最新推荐文章于 2025-03-22 09:44:36 发布 · 1k 阅读 · 4
标签
#element #elementplus #router-view #el-tab #el-tab-pane
#多次渲染 #vue

最近在用vue3+elementPlus开发后台界面，用到右侧el-tab这个组件结合router-view实现调用，刚在逛csdn的时候发现一个大佬说如果把router-view放在el-tab-pane下会导致多次渲染，我想还有这事？赶紧测试一下。。。果然，大佬还是大佬。

原代码及渲染次数

<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
  <el-tab-pane v-for=
最低0.47元/天 解锁文章
element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次
lee576的专栏
11-19 2716
之前参考某文章把 router-view 放在 el-tab-pane 外面都不起作用，问题根本不是出在 el-tab-pane，而是v-for 里面有多个route-view , keep-alive 时 tab 并未销毁掉，而是缓存隐藏了起来。需要把 router-view 的 name 与路由的 index.js 名称对应起来。之前参照很多文章修改试图修正这个问题，结果都徒劳，终于让我找到。我做了如下修改，主页面 main.vue。
Vue2的router-view,keep-alive和el-tabs结合做标签页切换
qq_37289115的博客
07-19 3575
Vue2的router-view,keep-alive和el-tabs结合做标签页切换，并实现iframe组件的缓存
Vue+element+Tabs结合切换路由的问题
m0_49680854的博客
05-27 3605
踩坑-Vue+element+Tabs结合切换路由的问题 问题复述：我是通过与element结合，自己封装的Tabs组件，如图一所示，将<router-view></router-view>与组件的插槽结合，通过切换tabs来实现路由的切换。插槽中单纯的插入<router-view></router-view>无任何问题，但如果加入图二所示的代码，就会出现切换时页面遗留和动画失效的情况，此坑想告诉各位千万不要将<router-view></r
vue+elementUI el-tabs标签路由切换
m0_57071129的博客
07-27 1万+
注意这里如果你刷新只想保留首页，那么mounted中，你只需写else中的代码。1.实现tab组件pageTab.vue，我这里是拆的组件。如果刷新想，保留首页和当前路由页，ifelse都要写（）配置路由页面我这里是动态路由，所以比较简短。需要使用tab组件的地方。...
VUE包含多个router-view解决办法
爱coding的大尾巴的专栏
07-05 1万+
如果一个页面有多个router-view，加载时会重复加载接口。解决这个问题，可使用以下方式：1，将router-view加入name属性。 2，路由规则里面加入 components，使router-view加入name属性与页面对应。 3，将JS点击事件对应到路由规则的name属性 这样，每次tab切换加载页面时，只加载对应页面的接口。......
elementui 自定义增加标签页 动态绑定路由
ready456789的专栏
09-03 3462
效果如下： el-header，el-aside，el-main布局，el-main中 <el-main> <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="tabClick"> <el-tab-pane v-for="(item, index) in editabl.
动态路由和tab页切换路由
qq_41552234的博客
09-08 4723
动态路由和tab页切换路由 文章目录动态路由和tab页切换路由一、在当前页面监听路由的改变1、beforeRouterEnter 进入前拦截路由2、beforeRouterUpdate 路由更新时拦截3、beforeRouterLeave 离开该路由时调用二、动态路由1、在系统中填入组件信息2、在permission.js路由拦截器中处理路由3、filterAsyncRouter处理后台返回的路由数据三、tab页动态路由切换1、tab页2、准备状态管理（tabRouterPath.js）3、在Layo
在VUE项目里面如何来写切换标签，el-tabs el-menu 、vue的is属性切换组件 、router切换，切换页面不重新上数据
qlin_11的博客
08-09 3818
这里就不细讲了，直接写总结 el-tabs el-menu 、vue的is属性切换组件 、router切换 前两者是组件化的，用就行了没什么太大问题，注意的地方就是el-menu可以上router来控制路由，激活路由要使用default-index来控制，这里用$router.path来取当前push的路由。 第三个我用得少，这个是js控制变量来控制显示的组件，他这个对于el-tabs来说会比较小...
Vue路由跳转至页面后多次渲染
qq_32054169的博客
09-19 2214
Vue路由跳转至页面后多次渲染问题解决方案
ElementPlus 标签页和路由的组合使用
weixin_71645445的博客
04-07 2542
以下为Tab.vue 思路就是标签页的组件记录路由的path 被选中就将对应的path push到路由器里 将<RouteView/>的内容替换。目标:左侧导航区 右侧为展示区 点击导航区的某一项 右侧会新建一个标签页 展示内容 标签页之间可以点击切换 可以关闭除首页的其他标签页。以下为route/index.ts。
vue同一个页面可以有多个router-view
热门推荐
蜡笔小心
04-25 4万+
使用Vue+Element搭建项目的时候，为了避免一个页面过大，将tab里面的内容分成多个页面，并使用同级视图展示&lt;el-tabs v-model="activeName" @tab-click="handleClick"&gt; &lt;el-tab-pane label="用户详情" name="first"&gt; &lt;route
vue：router-view二次渲染误操作
weixin_44241773的博客
02-10 2059
router-view二次渲染解决方法以及原因分析
ElementPlus菜单如何默认打开第一个，router-view里替换变的，menu菜单没有跳转怎么办，开启路由:router=“true“，如何设置点击空格就调用方法
weixin_54048131的博客
04-07 1248
【代码】ElementPlus菜单如何默认打开第一个，router-view里替换变的，menu菜单没有跳转怎么办，开启路由:router=“true“，如何设置点击空格就调用方法。
elment-ui el-tabs组件 每次点击后 created方法都会执行2次
IT博客技术分享
03-19 2128
在element-ui的tabs组件中，我们发现每次切换页面，所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时，这样会过多的占用网络资源。这里我们可以使用v-if 来进行判断是否渲染该子页面。不会如何在。
elementui tab标签管理路由页面
潇蓝诺依的博客
10-25 3万+
文章目录样式准备思路搭建搭建页面框架准备状态管理监听路由变化tab方法 样式 准备 搭建好的vue脚手架（elementui，router，vuex） elementui（NavMenu 导航菜单，Tabs 标签页） 思路 将打开的所有路由放到一个栈里（openTab:[]），tabs显示遍历openTab 初始状态，将首页推入栈，并设置激活状态 当切换路由时(监听路由变化),判...
vue 组件复用的两种方法以及el-tab-pane切换标签时如何重新触发钩子函数
77今天也学习了的博客
04-28 7905
当多个页面具有相同的页面模板时，想要共同同一个组件，有两种方法实现。 方法一 1.app.vue中 必须加上key属性，让每次进入路由时都重新触发钩子函数 <router-view :key="key" /> computed: { key() { // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同 // console.lo...
vue3+element-plus+pinia的路由标签卡制作
最新发布
m0_73444363的博客
03-22 379
功能介绍：能够做到点击右侧菜单栏切换路由的时候，上面会自动出现标签卡，可以点击标签卡切换路由页面，并且做到删除标签卡后回退页面。完成这个功能只需要两部分修改（本功能默认配好了elemen-plus组件库，pinia和vue-router都安装完毕），然后跟着我做只需三步就轻松完成这个功能啦。
vue+element plus 点击左侧菜单，右侧内容根据路由切换
weixin_42634040的博客
01-19 5459
菜单切换之前都是用菜单el-menu和el-tabs标签页拼接的，但是菜单没有的组件打不开了，所以改为根据路由打开内容，主要就是改为router-view 借鉴学习了这位大大的思路 指路链接 自己成功之后记录下 路由 router.js const routes = [ { path: '/', name: 'home', component: () => import("../views/Home.vue"),////这里是核心： center作为容器组件，包含左右菜单
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值