学vue笔记 router

最新推荐文章于 2022-11-14 10:04:24 发布

axibadexiang

最新推荐文章于 2022-11-14 10:04:24 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/axibadexiang/article/details/80835060

本文介绍了如何在Vue中利用路由与底部Tab结合的方式实现页面切换。通过为每个Tab绑定对应的路由路径，并设置活动状态样式，可以轻松实现底部导航栏的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学了vue蛮久的，也做过很多小项目，今天看了一个视频关于路由的，竟然发现自己不知道这个东西，实在是有些惭愧！觉得挺好用的就记下来了。在做移动端的时候。我们经常遇到这样的场景，底部四个tab，点击哪个一个显示对应的路由页面。

下面就是我看了不知道的：

 <div class="footer_guide">
        <div class="guide_item" :class="{on:'/msite'===$route.path}" @click="goTo('/msite')">
          <span class="item_icon">
          </span>
          <span>主页</span>
        </div>
        <div class="guide_item" :class="{on:'/search'===$route.path}" @click="goTo('/search')">
          <span class="item_icon">
            1
          </span>
          <span>搜索</span>
        </div>
        <div class="guide_item" :class="{on:'/order'===$route.path}" @click="goTo('/order')">
          <span class="item_icon">
            1
          </span>
          <span>订单</span>
        </div>
        <div class="guide_item" :class="{on:'/profile'===$route.path}" @click="goTo('/profile')"> 
          <span class="item_icon">
            1
          </span>
          <span>个人中心</span>
        </div>
    </div>

每个tab绑定样式，然后点击哪一个tab他的路径等于$route.path 那么.on这个类别就被绑定上了。

  goTo(path){
           this.$router.replace(path)
       }

然后给每个tab添加点击事件，点击路由到对应的页面。注意不是this.$router.push二是replace