vuerouter导航栏tarber同级组件间页面切换

最新推荐文章于 2023-12-29 11:03:05 发布
最新推荐文章于 2023-12-29 11:03:05 发布
阅读量549 收藏
点赞数
分类专栏： vue移动端tarber学习记载 
<template>
  <div class="bottom-tab">
    <!-- 点击跳转进行页面间的切换，    添加一个点击事件，然后把路径传参的方式传进事件执行 -->
    <span class="tab-item" @click="switchTo('/home')">
      <img src='static/img/icon_home.png' alt="">
      <span>首页</span>
    </span>
    <span class="tab-item" @click="switchTo('/recommend')">
      <img src='static/img/icon_intro.png' alt="">
      <span>推荐</span>
    </span>
    <span class="tab-item" @click="switchTo('/search')">
      <img src='static/img/icon_search.png' alt="">
      <span>搜索</span>
    </span>
    <span class="tab-item" @click="switchTo('/chat')">
      <img src='static/img/icon_chat.png' alt="">
      <span>聊天</span>
    </span>
    <span class="tab-item" @click="switchTo('/me')">
      <img src='static/img/icon_mine.png' alt="">
      <span>个人中心</span>
    </span>
  </div>
</template>
<script>
export default {
    name:'TarBer',
    methods:{
      // 上面定义的点击事件的方法
      // 使用router自带的同级页面跳转的方法
      switchTo(path){
        // console.log(this.$router);
        // 同级间路由切换用router里面的this.$router.replace(path)path就是/home或/me
        //指定跳转路由 this.$router.replace(这里写路由路径)就直接跳过去了
        this.$router.replace(path)
      },

    }
  }

</script>
<style lang="stylus" ref="stylesheet/stylus">
.bottom-tab
  width 100%
  height 50px
  background-color #fff
  position fixed
  z-index 999
  left 0
  bottom 0
  // top 50%
  display flex
  .tab-item
    display flex
    //每个子元素占一份平分
    flex 1
    //设置主轴为垂直方向
    flex-direction column
    //交叉轴中点对齐
    align-items center
    // 主轴居中
    justify-content center
    font-size 14px
    color #666
    img
      width 35%
      margin-bottom 2px



</style>

然后点击每个路由子组件，字体样式与图标都要发生改变 怎么去做判断？又怎么去改变？this.$route.path可获取当前页面路由，可以用此做判断，代码如下

<template>
  <div class="bottom-tab">
    <!-- 点击跳转进行页面间的切换，    添加一个点击事件，然后把路径传参的方式传进事件执行 -->
    <span class="tab-item" @click="switchTo('/home')">

                            <!-- (B)tarber图片切换 -->
      <!-- 为src做个动态路径的绑定 运用三目运算做判断-->
      <!-- 判断的条件同样是$route.path里面的路由参输是否与之相等 -->
      <!-- 相等执行哪个路径，不同执行哪个路径 -->
      <img :src="'/home' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="">

                          <!-- (A)字体样式动态绑定 -->
      <!-- 动态绑定class样式，因为$router.path里记录的是当前页面的路由参输，所以可以拿这个作为判断的条件，一旦和本页面的路由路径相等，值就为true执行on里面的样式，就实现了点哪个哪个样式就发生改变 -->
      <span :class="{on:'/home'===$route.path}">首页</span>


    </span>
    <span class="tab-item" @click="switchTo('/recommend')">
      <img :src="'/recommend' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="">
      <span :class="{on:'/recommend'===$route.path}">推荐</span>
    </span>
    <span class="tab-item" @click="switchTo('/search')">
      <img :src="'/search' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="">
      <span :class="{on:'/search'===$route.path}">搜索</span>
    </span>
    <span class="tab-item" @click="switchTo('/chat')">
      <img :src="'/chat' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="">
      <span :class="{on:'/chat'===$route.path}">聊天</span>
    </span>
    <span class="tab-item" @click="switchTo('/me')">
     <img :src="'/me' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="">
      <span :class="{on:'/me'===$route.path}">个人中心</span>
    </span>
  </div>
</template>
<script>
export default {
    name:'TarBer',
    data(){
      return {
        // 图标变化定义的路径数组
        tabBarImgArr:[
           {normal:require('static/img/icon_home.png'),selected:require('static/img/icon_home_selected.png')},
           {normal:require('static/img/icon_intro.png'),selected:require('static/img/icon_intro_selected.png')},
           {normal:require('static/img/icon_search.png'),selected:require('static/img/icon_search_selected.png')},
           {normal:require('static/img/icon_chat.png'),selected:require('static/img/icon_chat_selected.png')},
           {normal:require('static/img/icon_mine.png'),selected:require('static/img/icon_mine_selected.png')}
        ]
      }
    },
    methods:{
      // 上面定义的点击事件的方法
      // 使用router自带的同级页面跳转的方法
      switchTo(path){
        console.log(this.$router);
        // 同级间路由切换用router里面的this.$router.replace(path)path就是/home或/me
        // 跳转到指定的路由地址
        this.$router.replace(path)
      },

    }
  }

</script>

这样就做好了判断

然而很不幸，项目遇到bug，比如说首页有二级路由，一进首页首页就会展示/home/demo，这样

  <img :src="'/home' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="">

这种动态绑定的样式就匹配不到正确的值了
所以这里需要用includes，只要包含/home就视为true，就使用样式
改写：

<template>
  <div class="bottom-tab">
    <!-- 点击跳转进行页面间的切换，    添加一个点击事件，然后把路径传参的方式传进事件执行 -->
    <span class="tab-item" @click="switchTo('/home')">

                            <!-- (B)tarber图片切换 -->
      <!-- 为src做个动态路径的绑定 运用三目运算做判断-->
      <!-- 判断的条件同样是$route.path里面的路由参输是否与之相等 -->
      <!-- 相等执行哪个路径，不同执行哪个路径 -->
      <!-- 首页与其他路由配置的不同点 -->
      <!-- 首页下包含二级路由，所以首页的路由应该是/home/demo这样的 -->
      <!-- 所以这里应该改为只要路由路径中包含/home就使值为true -->
      <!-- <img :src="'/home' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt=""> -->
      <!-- 改为     includes('包含')-->
      <img :src="$route.path.includes('/home') ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="">

                          <!-- (A)字体样式动态绑定 -->
      <!-- 动态绑定class样式，因为$router.path里记录的是当前页面的路由参输，所以可以拿这个作为判断的条件，一旦和本页面的路由路径相等，值就为true执行on里面的样式，就实现了点哪个哪个样式就发生改变 -->
      <!-- <span :class="{on:'/home'===$route.path}">首页</span> -->
      <!--和上面一样 这里也改为 -->
      <span :class="{on:$route.path.includes('/home')}">首页</span>


    </span>
    <span class="tab-item" @click="switchTo('/recommend')">
      <img :src="$route.path.includes('/recommend') ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="">
      <span :class="{on:$route.path.includes('/recommend')}">推荐</span>
    </span>
    <span class="tab-item" @click="switchTo('/search')">
      <img :src="$route.path.includes('/search') ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="">
      <span :class="{on:$route.path.includes('/search')}">搜索</span>
    </span>
    <span class="tab-item" @click="switchTo('/chat')">
      <img :src="$route.path.includes('/chat') ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="">
      <span :class="{on:$route.path.includes('/chat')}">聊天</span>
    </span>
    <span class="tab-item" @click="switchTo('/me')">
     <img :src="$route.path.includes('/me') ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="">
      <span :class="{on:$route.path.includes('/me')}">个人中心</span>
    </span>
  </div>
</template>
<script>
export default {
    name:'TarBer',
    data(){
      return {
        // 图标变化定义的路径数组
        tabBarImgArr:[
           {normal:require('static/img/icon_home.png'),selected:require('static/img/icon_home_selected.png')},
           {normal:require('static/img/icon_intro.png'),selected:require('static/img/icon_intro_selected.png')},
           {normal:require('static/img/icon_search.png'),selected:require('static/img/icon_search_selected.png')},
           {normal:require('static/img/icon_chat.png'),selected:require('static/img/icon_chat_selected.png')},
           {normal:require('static/img/icon_mine.png'),selected:require('static/img/icon_mine_selected.png')}
        ]
      }
    },
    methods:{
      // 上面定义的点击事件的方法
      // 使用router自带的同级页面跳转的方法
      switchTo(path){
        // console.log(this.$router);
        // 同级间路由切换用router里面的this.$router.replace(path)path就是/home或/me
        // 跳转到指定的路由地址
        this.$router.replace(path)
      },

    }
  }

</script>

但还是有个bug没能修复
在这里插入图片描述
明明显示的是热门板块，导航条却停留在鞋包

丶久友
关注
专栏目录
Vue - 利用 data-* 做不同页面之间的切换
王佳斌
06-02 1125
前言 底部有完整代码。 直接上图，大概就是这样一个需求（Tab页切换）： data - *（存储和操作数据） 在开始之前，先来了解一下 HTML5 自定义属性，你可以往 HTML 标签上添加任意以 data- 开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。 因此，我们可以利用它可读写特点，设立一个 标识 来对比完成页面切换。 如何获取 假设这是我们自定义的属性标识: data-id = "1" <button @click="go()" data-id
Vue+ElementUI+VueRouter实现左边导航栏切换页面内容组件显示
Alanrnzearn的博客
08-28 7992
显示效果如下： 效果说明： 实现左边导航栏这一效果就得借用到ElementUI组件中关于导航菜单的使用，NavMenu 导航菜单，这个是为网站提供导航功能的菜单样式。 而点击导航栏能够实现内容页面的切换主要是依赖于VueRouter功能。 左边点击导航栏进行导航时，路由切换到对应的页面，这里需要使用 <router-link> <router-link>组件可以支持在具有路由功能的应用中 (点击) 导航， 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，
vue-router在同一个路由下切换，取不到变化的路由参数
weixin_30824599的博客
03-21 252
最近用vue写项目的时候碰到一个问题，在同一个页面下跳转，路由地址不变，路由参数有变化，一开始只是在data里取路由的参数，发现根本取不到变化的路由参数。 例如：订单列表也跳转详情页，跳转方法如下 <router-link :to="{path: '/orderDetail', query: {orderId: scope.row.orderId}}"> ...
vue 同级页面跳转，查询和返回
shenqingkong的博客
04-29 3117
当一个列表中需要跳转同级页面时，原型是这样的 点击查询分配比例按钮，需要跳转到同级页面的，可以说是这条数据详情里面去， 看到网上各种方法，但是可能是因为是初学者，一个都没有实验成功，最后做出来是这样的，附上代码 首先，先写两个模块，即第一个主页面，和需要跳转的页面，包裹两个div, 第一个div中写入 v-if=“loginType === 'query” 此处参考https://ww...
前端学习（3026）：vue+element今日头条管理-让导航栏和路由对应起来
歌谣的博客
06-16 219
Vue Router Tab
zk86547462的博客
09-25 3045
介绍 Vue Router Tab 是基于 Vue.js 和 Vue Router 的路由页签组件，用来实现多页签页面的管理。 官网 演示 包含的功能 ✅ 响应路由变化来打开或切换页签 ✅ 页签过多鼠标滚轮滚动 ✅ 页签拖拽排序 ✅ 支持页签打开、切换、关闭、刷新、重置等操作 ✅ Iframe 页签嵌入外部网站 ✅ 组件个性化设置：过渡效果、自定义插槽、页签右键菜单 ✅ 多语言支持 ✅ 缓存控制：页签规则、页签是否缓存、最大缓存数、是否复用组件等 ✅ 动态页签信息：标题、图标、提示 ✅ 初始页签数据，进入页
vue设置导航栏、侧边栏为公共页面的例子
10-16
本文将详细介绍如何在Vue项目中设置导航栏和侧边栏为公共页面，并通过使用`<keep-alive>`和`$route.meta`来动态控制这些公共组件的显示。 首先，我们需要了解Vue Router的`meta`字段可以用来定义路由的元信息。这个...
vue+Vue Router多级侧导航切换路由(页面)的实现代码
10-17
本文将详细讲解如何利用Vue和Vue Router实现一个多级侧导航栏，这种导航栏通常用于在SPA中快速切换不同层级的页面。 首先，我们需要明确什么是多级侧导航。多级侧导航是一种导航结构，它可以包含多个层级，类似于...
当vue路由变化时,改变导航栏的样式方法
10-18
4. 对于需要保持状态的应用（如购物车、登录状态等），可能需要结合Vuex这样的状态管理库来在不同组件间共享状态，这样即使路由变化，导航栏的状态也可以得到保持。 5. 在复杂的应用中，可能需要对导航栏进行不同...
vue-router实现tab标签页（单页面）详解
12-29
vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。 首先，.vue中的内容非常简单，<router>创建标签，并指定路径，<router>渲染路由匹配到的组件。 <template> <div id=account> <p class=tab> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-li
小程序中几个功能
09-12
自己差用的几个功能，有侧边栏，顶部tarber，底部自定义tarber，图片上传，支付功能，进度流程展示，在原有的请求函数上面进行了封装，对原有的弹窗提示进行了封装
Vue-router-tab的使用
最新发布
Judy1623
12-29 624
通常，在用户重新登录或者切换角色的情况下，我们需要关闭用户所有页签并恢复页签初始状态，包括恢复初始页签、跳转到指定的默认页面等。强制刷新所有页签，忽略页面组件的 beforePageLeave 配置。此方法默认会刷新已有页签，如果希望全新打开页签，您可以尝试此方法。您可以通过 RouterTab 的实例方法。您可以通过 RouterTab 的实例方法。您可以通过 RouterTab 的实例方法。关闭当前页签并跳转地址，并刷新该地址。Vue Router 原生方式。方法来重置页签到初始状态。
vue tab切换_vue子路由跳转实现tab选项卡
weixin_39887546的博客
12-12 1283
现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再进行切换，而vue要做tab选项卡，推荐使用实现a标签的效果，然后使用实现插槽的效果，把对应的页面 "塞" 进去，具体实现看下面的案例：这是tab选项卡的效果，布局就不多说了，主要是{{a.title}}，其中to是指向你要跳转的路径，这是关键，而就是最终其他子...
Vue学习——VueRouter封装一个简单通用的TabBar
m0_47807991的博客
03-27 1304
vue学习——VueRouter小练习，封装一个简单通用的Tab bar
vue配合vuerouter和vuex实现多tab标签切换，页面缓存和页面释放。
xiaozhuangping的博客
04-21 1462
地址
vue实验报告5 Tab栏的切换案例（使用路由）
永烨的博客
11-28 2448
然后就是最重要的一步，属于是旧版本的自作多情，因为没选vue3，因为教材太老，所以我们学的是2.x所以只能选2.x，不然很多语法压根就不一样，羡慕后面学vue3的同学。3.一定要注意版本，可以直接在vue ui里面选择手动设置，只能用vue2，下个学期的新生会学vue3，但我们不会。接下来的用哪个勾选哪个，比如这一节就用的router，就勾上，后面自动会选版本号。然后就是漫长的等待，毕竟不是咱们国家创的东西，要下载很长时间，好几分钟。然后在第一个页面的中间下拉箭头选npm，没下的找教程下npm。
用 vue-router 实现 tab 标签页（单页面）
热门推荐
Latency の 博客
10-17 1万+
vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。 首先，.vue中的内容非常简单，创建标签，并指定路径，渲染路由匹配到的组件。
Vue获取页面当前路由的方式
weixin_50013077的博客
12-14 1617
完整url: window.location.href。路由路径参数: this.$route.params。路由路径: this.$route.path。
Vue Router实现天猫底部导航
"这篇文章主要讲解如何使用Vue Router来实现类似天猫底部导航栏的功能，包括图标获取、组件创建和路由配置等步骤。" 在Vue.js应用中，Vue Router是官方推荐的路由管理器，用于处理页面间的导航和状态管理。在这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值