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 el-table 默认展开某一行的实例

    Vue el-table 默认展开某一行的实例

    这篇文章主要介绍了Vue el-table 默认展开某一行的实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue获取子组件实例对象ref属性的方法推荐

    Vue获取子组件实例对象ref属性的方法推荐

    在Vue中我们可以使用ref属性来获取子组件的实例对象,这个功能非常方便,这篇文章主要给大家介绍了关于Vue获取子组件实例对象ref属性的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue+Vant实现顶部搜索栏

    Vue+Vant实现顶部搜索栏

    这篇文章主要为大家详细介绍了Vue+Vant实现顶部搜索栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Element UI框架中巧用树选择器的实现

    Element UI框架中巧用树选择器的实现

    这篇文章主要介绍了Element UI框架中巧用树选择器的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue浅拷贝和深拷贝实现方案

    Vue浅拷贝和深拷贝实现方案

    在理解浅拷贝和深拷贝浅前,必须先理解基本数据类型和引用数据类型的区别,这篇文章主要介绍了Vue浅拷贝和深拷贝实现方案及区别对比分析,需要的朋友可以参考下
    2023-03-03
  • vue组件以及父子组件通信方式

    vue组件以及父子组件通信方式

    这篇文章主要介绍了Vue组件化的基本概念,包括什么是组件化、Vue的组件化思想以及如何在Vue中注册和使用组件,文章还详细讲解了如何进行父子组件之间的通信,包括父组件传递数据给子组件和子组件通过自定义事件将数据传递给父组件,文章最后通过一个综合练习来巩固所学知识
    2025-02-02
  • vue-cli设置publicPath小记

    vue-cli设置publicPath小记

    这篇文章主要介绍了vue-cli设置publicPath小记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 使用mockjs如何生成随机数据

    使用mockjs如何生成随机数据

    Mockjs是一个用于生成随机数据和拦截Ajax请求的库,可以与Vue和Axios结合使用,提高前端开发效率,通过在项目中引入Mock.js文件,可以模拟后端API,拦截Ajax请求并返回自定义响应,这种方法适用于在后端尚未开发完成时的前端开发测试
    2024-10-10
  • vue v-for 使用问题整理小结

    vue v-for 使用问题整理小结

    使用v-for指令的时候遇到一个错误问题,具体错误代码在文章给大家列出,对vue v-for使用问题感兴趣的朋友跟随小编一起学习吧
    2019-08-08
  • vue中v-model如何绑定多循环表达式实战案例

    vue中v-model如何绑定多循环表达式实战案例

    v-model绑定的变量无论是对象还是数组都是绑定的value值,下面这篇文章主要给大家介绍了关于vue中v-model如何绑定多循环表达式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论