vue el-tabs 路由 本地显示正常 生产上显示不正常

最新推荐文章于 2023-06-12 17:14:05 发布
最新推荐文章于 2023-06-12 17:14:05 发布
阅读量421 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24549181/article/details/124026636
版权

今天调试了半天也没发现生产上el-tabs显示不正常的问题，刚开始以为是路由问题，路由也能正常传数据。

<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">

后来发现，这个activeName是字符类型的，路由转换的时候，要明确的转换成字符类型，而不是整数类型

this.newIndex = this.$route.params.newIndex
this.activeName = this.newIndex+''

错误解决，坑啊

夏日和风123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
（3）vue基于el-tabs实现路由选项卡组件封装
weixin_42283712的博客
09-23 3603
记录历史页面的路由选项卡组件完成效果创建tabs组件根据路由数据渲染标签组件内通过vuex内的数据渲染标签 完成效果 创建tabs组件 新建Tabs.vue // Tabs.vue <script> export default { name: 'Tabs', render() { return ( <div class="l_Tabs_wrap"> <el-tabs type="card" > <e
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
vue3 项目生产环境切换路由卡死问题 【vue bug】
星宇大前端
01-28 4796
工作那么多年第一次遇到一个问题卡了两天，最后也不是自己解决的。感谢 edison1105大神帮忙解决问题，记录一下，以后还会有人踩坑。 背景 最近用vue3 全家桶写了 后端管理系统。 传送门 vue3 + compositionAPI ts vue-router   问题 开发很流程，在开发环境运行也很好，部署到服务器的时候报错。 [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigato.
el-tabs 切换echarts 不显示
qq_29384639的博客
10-15 581
解决： 重新加载一次未显示的echarts图形 handleClick(tab, event) { console.log(tab, event); this.$nextTick(() => { echarts.getInstanceByDom(this.$refs.dayLine).resize(); echarts.getInstanceByDom(this.$refs.personLine).resize(); .
vite3 + vue3 异步加载路由后挂载 APP 实例，生产环境下页面空白问题解决
tanqin的博客
08-13 1846
vite3 + vue3 异步加载路由后挂载 APP 实例，生产环境下页面空白问题解决
Vue解决element的tab切换时显示不正确
heni6560的博客
09-29 2789
原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。这里说明一下，一定要在把需要的echart图表做成组件来使用，不然的话一开始默认加载不到，页面是会报错的，一定要做成组件来使用。版权声明：本文为CSDN博主「前端李小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。我在开发时，在tab控件点击切换，那么数据不变，要不显示不正确。原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab。
vue-tabs-chrome-用于类似Chrome的标签的Vue组件。-Vue.js开发
05-27
vue-tabs-chrome一个类似于Chrome的标签的Vue组件。 Draggabilly由@desandro提供的拖放支持。 现场演示https：//viewweiwu.github.i vue-tabs-chrome一个类似于Chrome的标签的Vue组件。 Draggabilly由@desandro提供...
解决vue-router进行build无法正常显示路由页面的问题
11-27
加入vue-router然后使用路由引入一个新的组件。这时路由和链接是这样写的 const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/first', component: firstCom } ] }) ...
vue el-table实现行内编辑功能
10-15
主要为大家详细介绍了vue el-table实现行内编辑功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下
异步路由/动态路由配置后，页面刷新出现空白页或404的解决办法
m0_65051174的博客
03-16 3797
按照 登录-》路由调转 进行时，我们在登录时会调用接口，获取动态路由信息，此时是有路由信息的，可以正常跳转。但是，当我们刷新时，会删除动态路由信息，关于addRoute，官网中有这样一句话：‘请注意，添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。在配置路由守卫时，获取路由信息并添加路由（addRoute）后，使用 router.push() 或 router.replace() 重新加载路由。
Vue3: 路由多次点击,只路由跳转,但是页面不显示
西魏陶渊明的博客
03-13 1101
Vue3: 路由多次点击,只路由跳转,但是页面不显示
解决 Vite + Vue3 开发中路由异步加载导致的页面无法点击等问题
最新发布
weixin_43263566的博客
06-12 1504
解决 Vite + Vue3 开发中路由异步加载导致的页面无法点击等问题
el-table不显示问题
m0_62434937的博客
09-15 5981
el-table不显示的阴间bug
element plus之 el-scrollbar 异步请求后滚动条不显示，但可正常滚动
qq_48850466的博客
11-06 1204
el-scrollbar 异步请求后滚动条不显示，但可正常滚动
el-scrollbar 异步请求后导致滚动无效
陈熙之的博客
05-18 1215
原本直接读取data里的数据，一切正常，当异步之后，滚动条没有了 <el-scrollbar ref="scrollDiv"> <ul class="fwprod-total clearfix" ref="fwAll" :style="{width:allWidth + 'px'}"> <li class="fwprod-total-item" v-for="(item,index) in fwtotal" :key="index" :styl
vue+elementUI el-tabs标签路由切换
热门推荐
m0_57071129的博客
07-27 1万+
注意这里如果你刷新只想保留首页，那么mounted中，你只需写else中的代码。1.实现tab组件pageTab.vue，我这里是拆的组件。如果刷新想，保留首页和当前路由页，ifelse都要写（）配置路由页面我这里是动态路由，所以比较简短。需要使用tab组件的地方。...
Vue项目部署到服务器上问题解决方法
lisheng0947的博客
12-21 2818
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。 如何打包：基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端 但有时候，我们会直接将dis
Vue中使用vuex实现el-tab的路由跳转以及样式回显
Jiang_bug的博客
04-28 2364
一、给vue中引入vuex npm install vuex --save 二、使用vuex中store 1.引入vuex以及store 找到vue项目中的main.js文件引入store // 引入vuex import Vuex from 'vuex' // 引入store (后面我们需要自建这个文件) import store from './store' // 使用vuex Vue.use(Vuex) new Vue({ router, // 加入store store,
el-tabs切换路由
06-02
如果您正在使用 Vue.js 和 Element UI，可以使用 `el-tabs` 组件来切换路由。首先，您需要导航到 `vue-router` 官方文档，并按照说明安装和配置 `vue-router`。然后，您可以使用以下代码来实现 `el-tabs` 切换路由： ```html <template> <div> <el-tabs v-model="activeTab" @tab-click="handleTabClick"> <el-tab-pane label="Home" name="/home"></el-tab-pane> <el-tab-pane label="About" name="/about"></el-tab-pane> <el-tab-pane label="Contact" name="/contact"></el-tab-pane> </el-tabs> <router-view></router-view> </div> </template> <script> export default { data() { return { activeTab: "/home" }; }, methods: { handleTabClick(tab) { this.$router.push(tab.name); } } }; </script> ``` 在上面的代码中，我们使用 `el-tabs` 组件来创建选项卡。每个选项卡都有一个标签和一个名称，名称对应着路由路径。我们使用 `v-model` 指令来绑定当前选中的选项卡，然后在 `@tab-click` 事件中，我们使用 `$router.push()` 方法来切换路由。最后，我们使用 `router-view` 组件来显示当前路由的内容。 请注意，这只是一个示例代码，您需要根据您的实际情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值