vue router如何实现tab切换

 更新时间:2022年04月26日 09:34:46   作者:半兽先生  
这篇文章主要介绍了vue router如何实现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>

图片

运行效果如图:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    本文给大家分享Vue 父子组件实现数据双向绑定效果的两种方式,方式一是通过监听事件实现方式二是通过 v-model 实现,每种方式结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-11-11
  • vue实现日历组件

    vue实现日历组件

    这篇文章主要为大家详细介绍了vue实现日历组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • webpack+vue.js实现组件化详解

    webpack+vue.js实现组件化详解

    vue的开发体验还是比较愉悦的。首先文档非常友好,所以上手会比较快。其次,配合webpack和vue-loader,每个页面都是一个.vue文件,写起来很方便。所以很适合做组件化开发,这篇文章我们就来一起看看webpack+vue.js如何实现组件化。
    2016-10-10
  • vue实现的多页面项目如何优化打包的步骤详解

    vue实现的多页面项目如何优化打包的步骤详解

    这篇文章主要介绍了vue实现的多页面项目如何优化打包的步骤详解,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • Vue3中简单实现动态添加路由

    Vue3中简单实现动态添加路由

    本文主要介绍了Vue3中简单实现动态添加路由,,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue中使用定时器(setInterval、setTimeout)的两种方式

    Vue中使用定时器(setInterval、setTimeout)的两种方式

    js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout,这篇文章主要介绍了Vue中使用定时器 (setInterval、setTimeout)的两种方式,需要的朋友可以参考下
    2023-03-03
  • vue中的自定义属性并获得属性的值方式

    vue中的自定义属性并获得属性的值方式

    这篇文章主要介绍了vue中的自定义属性并获得属性的值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue项目中常用的工具函数总结

    Vue项目中常用的工具函数总结

    这篇文章主要给大家介绍了关于Vue项目中常用的工具函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • 配置vite.confgi.ts无法使用require问题以及解决

    配置vite.confgi.ts无法使用require问题以及解决

    这篇文章主要介绍了配置vite.confgi.ts无法使用require问题以及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 仿照Element-ui实现一个简易的$message方法

    仿照Element-ui实现一个简易的$message方法

    这篇文章主要介绍了仿照Element-ui实现一个简易的$message方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09

最新评论