iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue router如何实现tab切换
  • 886
分享到

vue router如何实现tab切换

2024-04-02 19:04:59 886人浏览 薄情痞子
摘要

目录router实现tab切换router类似tab切换的使用router实现tab切换 实现的效果:path路径发生改变,tab切换的颜色也会到相对应的地方,并且进首页,默认推荐为

router实现tab切换

实现的效果:path路径发生改变,tab切换的颜色也会到相对应的地方,并且进首页,默认推荐为选中状态。

首先需要给<router-link>中直接添加active-class属性,然后在样式中设置自定义类名activeee的样式。

<li><router-link to="/" active-class="activeee" exact>推荐</router-link></li>
<li><router-link to="/crazy" active-class="activeee">疯狂折扣</router-link></li>
<li><router-link to="/fast" active-class="activeee">好物秒杀</router-link></li>
<li><router-link to="/ole" active-class="activeee">大牌精选</router-link></li>
<li><router-link to="/woman" active-class="activeee">女装</router-link></li>
.activeee {
  color: #f10180 !important;
  font-weight: 700;
}

注意:需要给默认首页的router-link里边添加exact属性,不添加的话,切换之后,推荐的颜色不会消失

router类似tab切换的使用

这次我们来聊聊Vue router的切换如何实现

1.首先我们需要在上一次创建好的项目中新建几个待切换的.vue文件

2.然后我们需要在router.js里面添加代码

// 组件
import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'

3.同在router.js里面的下面我们需要在当前显示的页面的路由中添加代码

此时就会实现切换,并且把Text1作为首选页

// Vue中使用children实现路由的嵌套
          // 使用 children 属性,实现子路由,同时,子路由的 path 前面,不要带 / ,
          // 否则永远以根路径开始请求,这样不方便我们用户去理解URL地址
          children:[
            {
                path:'/',        //如果只写 / 则说明默认打开一个页面
                redirect:'text1'//默认指向页面
            },
            {
              path: 'text1',
              component: Text1,
            },
            {
              path: 'text2',
              component: Text2,
            },
            {
              path: 'text3',
              component: Text3,
            }
          ]

如图:

4.这是我们还需要在存放切换功能页面也就是在未添加切换时显示的页面中添加代码:

	  <router-link to="/home/text1">
        <span>text1</span>
      </router-link> 
      <router-link to="/home/text2">
        <span>text2</span>
      </router-link> 
      <router-link to="/home/text3">
        <span>text3</span>
      </router-link> 
      <router-view></router-view>

图片

运行效果如图:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue router如何实现tab切换

本文链接: https://www.lsjlt.com/news/147370.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue router如何实现tab切换
    目录router实现tab切换router类似tab切换的使用router实现tab切换 实现的效果:path路径发生改变,tab切换的颜色也会到相对应的地方,并且进首页,默认推荐为...
    99+
    2024-04-02
  • vue实现tab栏切换效果
    本文实例为大家分享了vue实现tab栏切换效果的具体代码,供大家参考,具体内容如下 一个简单的tab栏切换组件,由tabs以及tab-pane组成 效果图 使用 <templ...
    99+
    2024-04-02
  • Vue实现Tab选项卡切换
    本文实例为大家分享了Vue实现Tab选项卡切换的具体代码,供大家参考,具体内容如下 点击不同的标题显示出相应的图片 代码如下 <!DOCTYPE html> <...
    99+
    2024-04-02
  • vue-router如何实现tab标签页
    这篇文章主要介绍了vue-router如何实现tab标签页,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue-router 是 Vue.j...
    99+
    2024-04-02
  • vue如何实现滚动tab跟随切换效果
    这篇文章给大家分享的是有关vue如何实现滚动tab跟随切换效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。分享一个我前几天做的移动端 tab滚动跟随的例子随着滚动条的滚动,ta...
    99+
    2024-04-02
  • js如何实现tab切换效果
    这篇文章主要介绍了js如何实现tab切换效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果如下:代码如下:<!DOCTYPE&nb...
    99+
    2024-04-02
  • Vue实现选项卡tab切换制作
    本文实例为大家分享了Vue实现选项卡tab切换制作代码,供大家参考,具体内容如下 1.主要的实现功能如下:(点击进行切换,这里我不做太多的样式处理了,主要看功能) 2.话不多说:主...
    99+
    2024-04-02
  • Vue中tab栏切换的简单实现
    目录一、效果展示二、实现原理三、css和h5的代码,获得最基本的样式1.css2.H5 这是没有在使用Vue书写前的样式四、Vue部分一、效果展示 二、实现原理 主体通过绑定事件,...
    99+
    2024-04-02
  • JS如何实现简单Tab栏切换
    这篇文章主要为大家展示了“JS如何实现简单Tab栏切换”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现简单Tab栏切换”这篇文章吧。具体内容如下要求:当鼠标点击上面相应的选项卡(tab...
    99+
    2023-06-29
  • vue实现tab切换的放大镜效果
    本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码,供大家参考,具体内容如下 废话不多说先看效果图 1.我这里并没有加遮罩层,如有需要请自行加上 2.图片建议使用4k高...
    99+
    2024-04-02
  • 怎么解决使用vue-router与v-if实现tab切换遇到的问题
    这篇文章主要介绍怎么解决使用vue-router与v-if实现tab切换遇到的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!先上代码,用两种方式实现的效果使用vue-router...
    99+
    2024-04-02
  • JavaScript实现Tab点击切换
    Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 Jquery 来实现 Tab 点击切换...
    99+
    2024-04-02
  • Android如何实现Tab切换界面功能
    这篇文章主要介绍“Android如何实现Tab切换界面功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android如何实现Tab切换界面功能”文章能帮助大家解决问题。一、实验目的 掌握各种高级U...
    99+
    2023-06-30
  • vue实现鼠标滑动展示tab栏切换
    本文实例为大家分享了vue实现鼠标滑动展示tab栏切换的具体代码,供大家参考,具体内容如下 动画效果: 代码如下: <template>   <div id="h...
    99+
    2024-04-02
  • 如何使用CSS实现Tab页切换效果
    这篇文章主要介绍如何使用CSS实现Tab页切换效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!三种写法:利用 :hover 选择器缺点:只有鼠标在元素上面的时候才有效果,无法实现选中和默认显示某一个的效果利用 a标...
    99+
    2023-06-08
  • JavaScript实现Tab栏切换特效
    这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示。 运行效果展示: 如上图所示,其实就是点击上方的...
    99+
    2024-04-02
  • Vue + Vue-router如何实现同名路由切换数据不更新功能
    这篇文章将为大家详细讲解有关Vue + Vue-router如何实现同名路由切换数据不更新功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在默认情况下, 同名路由之间的...
    99+
    2024-04-02
  • vue实现tab路由切换组件的方法实例
    前言 本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能,下面话不多说了,来一起看看详细的实现代码吧 实现图片如下 下列为实现代码 css: *{ ...
    99+
    2024-04-02
  • js实现tab栏切换制作
    本文实例为大家分享了js实现tab栏切换制作的具体代码,供大家参考,具体内容如下 效果: 思想: 1.点击每个tab时。要先用排他思想,使得所有li不加上背景,再让点击的tab加上...
    99+
    2024-04-02
  • angularjs实现Tab栏切换效果
    本文实例为大家分享了angularjs实现Tab栏切换效果的具体代码,供大家参考,具体内容如下 如图所示 选中后提交的实例代码: <!DOCTYPE html> <...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作