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

于 2019-05-10 21:45:22 发布
阅读量558 收藏
点赞数
分类专栏： 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没能修复
在这里插入图片描述
明明显示的是热门板块，导航条却停留在鞋包

丶久友
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值