vue 切换tab实现多个不同的组件显示在同一个挂载点且不跳转路由

最新推荐文章于 2022-12-22 11:54:35 发布
最新推荐文章于 2022-12-22 11:54:35 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36545813/article/details/110661191
版权
本文介绍了如何在Vue中使用切换tab的方法，实现在同一个挂载点显示多个不同的组件，而无需跳转路由。详细内容包括文件结构的组织和main.vue文件的代码解析，通过这种方式可以实现组件功能的清晰划分并便于用户自定义布局。
摘要由CSDN通过智能技术生成

目录

切换tab实现多个不同的组件显示在同一个挂载点

1，先来看看我的文件结构

在这里插入图片描述

将页面布局单独封装一个组件的好处，功能划分清晰，也很方便实现让用户自定义主图和布局的功能。

2,查看main.vue文件

请注意看注释~

<template>
    <div class="main">
            {
   {
   this.currentCom}}
        <transition name="fade" mode="out-in" appear>
          <keep-alive>
            <component :is=
最低0.47元/天 解锁文章
努力学习前端的77
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
12-09
然而，有时开发者可能会遇到一个特定的问题：在同一个路由下切换时，尽管路由参数发生了变化，但尝试从组件的数据（data）中获取这些参数时，却发现无法获取到最新的值。这个问题在使用Vue Router时比较常见，特别是...
Vue路由之组件切换
@不喝海之言@
03-05 5316
Vue路由之组件切换 今天我们来简单说一下Vue的路由实现组件之间的切换。 利用Vue的路由实现组件之间的切换，大致需要五步走： 导入Vue-router.js包 创建子组件 创建路由对象 把路由和我们的VM(view model)关联起来 挖坑，引路 具体怎么实现，我们结合着代码来简单的说一下： 1.导入Vue-router.js包 &lt;script src="../lib/vue-2....
vue 使用tab切换，tab下的内容展示不同的组件页面
weixin_44934104的博客
12-22 2285
功能说明： 点击添加的时候，可根据的不同tab切换到添加不同数据的页面 //HTML部分 <ul class="tab_tit"> <li :class="currentView== 'child1' ?'active':''" @click="tabChange(child1)">图文</li> <li :class="currentView== 'child2' ?'active':''" @click="tabChange(child2
vue3，单页面应用打开多个tab窗口
weixin_44832362的博客
11-17 3963
vue3，单页面应用打开多个tab窗口
vue实现同一个页面某一位置进行不同组件切换展示效果
weixin_51935690的博客
07-27 7065
目录结构如图，在主页面home点击旁边导航切换不同组件在同一页面效果 2、动态路由<component:is="componentnext"></component>用于切换组件，改变componentnext的组件名字即可，利用了动态绑定:class来指定此组件时此导航选中颜色的变化 2.代码即注释如下 <template> <div> <!-- <Top-head></Top-head> --> .
面试题总结Vue
鲸落鹿林
03-09 179
以下是对于面试题整理 1 MVVM MVVM是Model-View-ViewModel缩写，Model代表视图层，View代表用户界面，ViewModel是链接视图和用户UI的核心枢纽 2 双向绑定原理Vue2 Vue在初始化数据时，会使用Object.defindProperty重新定义data中所有的属性，当页面使用对应的属性时，就会进行依赖收集(使用watcher)，如果属性发生变化就会通知相关医疗进行更新操作(发布订阅)。 3 Vue3 响应数据原理 Vue3 Proxy代替Object.defin
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
10-16
在本文中，我们将探讨如何解决一个常见的问题，即当同一个组件被多次跳转，但每次传递的参数不同时，页面接收值只接收一次的情况。 首先，让我们回顾一下问题的场景。假设我们在`app.vue`中有以下代码片段： ```...
Vue切换组件实现返回后不重置数据,保留历史设置操作
10-15
在Vue.js应用中，我们经常需要在用户切换组件或路由时保持某些数据的状态，以便当用户返回时，之前的操作和设置依然保留。这通常涉及到组件的缓存与生命周期管理。本文将详细介绍如何在Vue中实现这个功能，以及如何...
vue不配置路由，切换页面
weixin_62328829的博客
09-23 3954
我期望实现是这样的效果，点击资料设置 ，右侧会显示资料设置页面，点击修改密码 ，右侧会显示修改密码页面。在日常开发中，通常实现页面跳转是通过路由实现的，那么不利用路由能否实现这个功能呢？这样就可以实现不使用路由，切换页面了。合理运用v-if完美实现。
vue 实现tab切换动态加载不同的组件
weixin_33936401的博客
04-05 2062
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件。具体看如下代码；这个功能对于vue比较复杂的页面可以使用上，可以把一个页面的功能拆分出来，使代码更简单。使用方式具体看如下代码： 主页面代码如下，分别导入了child1.vue, child2.vue, child3.vue 3个小模块，当点击页面某一项的时候去加载不同的组件。 &lt;style&gt; ...
通过Vue 完成简单的tab栏切换
yzq0820的博客
07-26 4739
主体通过绑定事件，索引的利用，v-for的数组遍历，来实现的切换效果。具体细节看代码段的解释，根据个人所需去了解一下，更多的是入门理解其中的细思。主体的布局根据个人的喜好，这里我只进行了简单的布局。其中也用到了浮动，和清除浮动。主要让展现的效果好看一些。具体样式还是根据个人。填充的内容以数组的形势来给到想要给的地方，可以给每一个内容都取一个固定的id，在后续可以提高性能，currentIndex:0,是定义的一个索引，通过这个索引来绑定类名，methods定义函数，也就是方法，后续在其中来实现切换。....
vue使用动态组件实现TAB切换效果
m0_61663332的博客
12-22 9840
vue移动端使用动态组件实现tab切换效果
vue中tab切换前端实现_vue 实现tab切换动态加载不同的组件
weixin_30806145的博客
01-30 1179
使用vue中的is特性来加载不同的组件。具体看如下代码；这个功能对于vue比较复杂的页面可以使用上，可以把一个页面的功能拆分出来，使代码更简单。使用方式具体看如下代码：主页面代码如下，分别导入了child1.vue, child2.vue, child3.vue 3个小模块，当点击页面某一项的时候去加载不同的组件。vue 动态组件实现tab切换加载不同的小模块第一项第二项第三项// 导入子组件im...
vue实现tab路由切换组件
chenzhuozhu的博客
08-15 1万+
使用vue自带的vue-router.js路由实现分页切换功能 实现图片如下 下列为实现代码 css: *{ margin: 0; padding: 0; } #app ul{ width: 300px; height: 30px; ...
Vue切换Tab动态渲染组件
denghuocc
08-14 6185
使用<component :is="组件名"></component> 结合Element-UI的导航菜单 : UI组件 el-menu-item里的index写对应的组件名 点击事件@select="handleSelect" <el-menu :default-active="activeIndex" class="el-menu-demo" mode="...
vue结合element-ui开发tab切换vue的不同组件，获取不同组件的后端提供的list列表
星
01-05 2253
此标签页用于基于若依框架开发的医疗系统中的页面。 1.创建父组件：系统中对应的组件路径：src/yao/index.vue 2.创建子组件src/tabComponents 文件夹 （此处路径可以任意，只要在父组件里引用正确即可）之下有不同组件对应的内容，此处以两个组件为例： Child1.vue Child2.vue 3.编写组件实现tab切换不同子组件 父组件:index.vue <template> <div class="index"> ...
vue子路由跳转实现tab选项卡
一只前端小菜鸟
03-06 1万+
现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再切换，而vue要做tab选项卡，推荐使用&lt;router-link&gt;&lt;/router-link&gt;实现a标签的效果，然后使用&lt;router-view&gt;&lt;/router-view&gt;实现插槽的效果，把对应的页面 "塞" 进去，具体实...
Vue2.0 多 Tab切换组件
热门推荐
White feathe 的博客
06-20 1万+
Vue2.0 多 Tab切换组件简单封装，满足自己简单的功能，可以直接拿去使用！首先上效果图：功能简单介绍：1、支持tab切换2、支持tab定位3、支持tab自动化仿React多Tab实现，总之可以正常使用满足日常需求，1、使用方法：==index.vue文件==<TabItems> <div name="买入" class="first"> <Content :isCont
vue项目使用Tabs切换页面并实现路由跳转
最新发布
06-01
好的，下面是实现步骤： 1. 在vue项目中安装vue-router插件，命令如下： ``` npm install vue-router --save ``` 2. 在项目中创建一个router文件夹，并在该文件夹下创建index.js文件，用于配置路由信息。例如： ```javascript import Vue from 'vue' import Router from 'vue-router' import Tab1 from '@/components/Tab1' import Tab2 from '@/components/Tab2' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/tab1' }, { path: '/tab1', name: 'Tab1', component: Tab1 }, { path: '/tab2', name: 'Tab2', component: Tab2 } ] }) ``` 这个例子中有两个选项卡，分别为Tab1和Tab2。 3. 在App.vue文件中添加选项卡组件，并使用router-view标签动态加载组件，例如： ```html <template> <div> <ul> <li> <router-link to="/tab1">Tab1</router-link> </li> <li> <router-link to="/tab2">Tab2</router-link> </li> </ul> <router-view></router-view> </div> </template> ``` 4. 在main.js中引入router并挂载到Vue上，例如： ```javascript import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` 这样就完成了路由配置和选项卡组件的使用。你可以在Tab1和Tab2组件中添加任何你想要显示的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值