vue切换tab更新路由created执行两次

问题描述

element-admin中使用tab切换到不同的路由，发现每次切换tab路由都会执行两次生命周期

<tabs:tabs="tabs"v-model="activeName"@on-switch="handleSwitch"
><components :is="activeName"></components>
</tabs>

问题分析

Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,可以使用is动态切换组件，切换组件后组件会立即开始一个生命周期，然后路由跟着变化了，路由变化后又引发了页面重新渲染，所以会出现created中的方法执行两次的问题。解决方法就是将动态组件放到一个<router-view>组件中，这样切换tab后就根据匹配的路由渲染页面了。

问题解决

使用<router-view>将动态组件包起来，这样每次切换都重新渲染一次。

<tabs:tabs="tabs"v-model="activeName"@on-switch="handleSwitch"
><router-view><components :is="activeName"></components></router-view>
</tabs>

备注

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>

<transition><keep-alive><router-view></router-view></keep-alive>
</transition>

vue切换tab更新路由created执行两次相关推荐

idea2020.1版本的maven项目报包不存在，找不到包错误，解决更新数据库执行两次的问题。
文章目录错误描述解决办法: 总结(这个方法会执行两次操作) 解决更新数据库出现两次的情况解决办法 pom.xml下的build标签错误描述 idea创建maven项目,导入依赖都是成功的, ...
VUE 返回上一页不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由，前进刷新，返回不刷新
每次进入页面时都执行created.前进刷新,返回不刷新思路: 利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新: keepAli ...
【Vue实用功能】Vue实现tab页多页面切换
Vue实现tab页多页面切换实现路由发生变化时,新增一个tab标签页,点击其他标签时切换到对应的页面,刷新网页同时保留状态这里就直接说它实现的代码就OK!!! VueX记录下每次新增后的tab标签 ...
vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
vue created 调用方法_深入解析 Vue 的热更新原理，偷学尤大的秘籍？
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
使用vue-i18n切换中英文-网页语言切换案例-vue文件中或路由(Router)文件中使用
vue-i18n地址安装 npm install vue-i18n 使用在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue- ...
vue中tab切换前端实现_使用vue实现tab操作
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...
uni-app小程序onShow执行两次；微信小程序onShow重复执行原因；导航栏tabBar页的onLoad函数不执行；App.vue页的onShow执行原因；onShow莫名其妙执行
1.只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码跳转到小程 ...

vue切换tab更新路由created执行两次

问题描述

问题分析

问题解决

备注

vue切换tab更新路由created执行两次相关推荐

最新文章

热门文章