Vue学习——VueRouter封装一个简单通用的TabBar

已于 2022-03-27 17:16:26 修改
阅读量1.2k 收藏
点赞数 1
文章标签： 前端 vue vue.js
于 2022-03-27 16:08:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47807991/article/details/123775250
版权

TabBar实现：

①不用组件 基础的写法：

step1.创建一个vuecli项目：
app.vue:

<template>
  <div id="app">
     <router-link to="/home" replace></router-link>
    <div id="tab-bar">
      <div class="tab-bar-item">首页</div>
      <div class="tab-bar-item">分类</div>
      <div class="tab-bar-item">购物车</div>
      <div class="tab-bar-item">我的</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
/* 引入CSS */
@import url('./assets/css/base.css');


</style>

css:

body{
  margin: 0;
  padding: 0;
}
#tab-bar{
  display: flex;
  background-color: #f6f6f6;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px -1px 1px rgba(100, 100, 100, 0.2);

}
.tab-bar-item{
 flex: 1;
 text-align: center;
 height: 49px;
}

效果：
在这里插入图片描述

②组件化开发(基本封装)：

在components文件夹中新建->tabbar->TabBar.vue和TabBarItem.vue
在img文件夹放需要的icon
在这里插入图片描述

TabBar.vue:

写了TabBar背景的样式 还预留了一个插槽

<template>
  <div id="tab-bar">
    <slot>
    </slot>
  </div>
</template>

<script>
 export default {
  name: 'TabBar' ,
}

</script>
<style scoped>
#tab-bar{
  display: flex;
  background-color: #f6f6f6;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px -1px 1px rgba(100, 100, 100, 0.2);

}

</style>

TabBarItem.vue:
预留了两个具名插槽

<template>
 <div  class="tab-bar-item">
   <slot name="item-icon"></slot>
   <slot name="item-text"></slot>
 </div>
</template>

<script>
 export default {
  name: 'TabBarItem' ,
 data () {
 return {
  }
 }
}

</script>
<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
}
  .tab-bar-item img{
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>

App.vue
里面使用了两层子组件：teb-bar和tab-bar-item

<template>
  <div id="app">
     <tab-bar>
      <tab-bar-item>
         <img src="./assets/img/home.svg" alt="" slot="item-icon">
         <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item>
        <img src="./assets/img/category.svg" alt="" slot="item-icon">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item>
        <img src="./assets/img/cart.svg" alt="" slot="item-icon">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item>
        <img src="./assets/img/profile.svg" alt="" slot="item-icon">
        <div slot="item-text">我的</div>
      </tab-bar-item>
     </tab-bar>
  </div>
</template>

<script>
import TabBar from './components/tabbar/TabBar'
import TabBarItem from './components/tabbar/TabBarItem'

export default {
  name: 'App',
  components: {
      TabBar,
      TabBarItem
  }
}
</script>

<style>

@import url('./assets/css/base.css');

</style>

base.css:

body{
  margin: 0;
  padding: 0;
}

最终效果：
在这里插入图片描述

③结合active和router的写法：

step1.
在一般的项目开发中Components里面只放一些公共通用的组件，而一些特有的小组件一般放在views的文件夹下：
所以在assets文件夹下创建views文件夹 并创建对应的页面对应的组件：
在这里插入图片描述

<template>
<div>
  <h2>首页</h2>
</div>
</template>

<script>
 export default {
  name: 'Home',
 data () {
 return {
  }
 }
}
</script>
<style>
</style>

step2.
配置路由：

import Vue from 'vue'
import Router from 'vue-router'

const Home = () => import('../views/home/Home')
const Cart = () => import('../views/cart/Cart')
const Category = () => import('../views/category/Category')
const Profile = () => import('../views/profile/Profile')


// 1.安装插件
Vue.use(Router)

// 2.创建路由对象
const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/category',
      component: Category,
      meta: {
        title: '分类'
      }
    },
    {
      path: '/cart',
      component: Cart,
      meta: {
        title: '购物车'
      }
    },
    {
      path: '/profile',
      component: Profile,
      meta: {
        title: '个人'
      }
    }
  ],
  mode:'history',
})
router.beforeEach((to,from,next) => {
  // 从from跳转到to
  document.title = to.meta.title
  // 这里必须调一下next()
  next()
})
export default router

step3.
添加点击事件 跳转路由
添加v-if 改变活跃状态

<template>
<!-- 这里的点击事件添加在这里避免在app.vue里添加四个 -->
 <div  class="tab-bar-item" @click="itemClick">
   <div  v-if="!isActive"><slot name="item-icon"></slot></div>
   <div v-else> <slot name="item-icon-active"></slot></div>
   <div :class="{active:isActive}"><slot name="item-text"></slot></div>
 </div>
</template>
<script>
 export default {
  name: 'TabBarItem' ,
  // 通过父传子传递路由
  props: {
     path: String
   },
 data () {
 return {
   isActive:true,
  }
 },
 methods: {
   itemClick() {
    this.$router.replace(this.path).catch(err=>{})
   }
 }
}
</script>
<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
}
  .tab-bar-item img{
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
  .active{
    color: #ff5777;
  }
</style>

这里的v-if、v-else尽量用div写在插槽的外面，因为插槽替换时是整个替换，很有可能使写在插槽里的判断条件失效。

step4.
在App.vue里传递路由：

<template>
  <div id="app">
    <router-view></router-view>
     <tab-bar>
       <!-- 这里传递路由 因为是一个固定值 不用动态绑定 -->
      <tab-bar-item path="/home">
         <img src="./assets/img/home.svg" slot="item-icon">
         <img src="./assets/img/home_active.svg" slot="item-icon-active">
         <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/category">
        <img src="./assets/img/category.svg" slot="item-icon">
        <img src="./assets/img/category_active.svg" slot="item-icon-active">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart">
        <img src="./assets/img/cart.svg" slot="item-icon">
        <img src="./assets/img/cart_active.svg" slot="item-icon-active">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile">
        <img src="./assets/img/profile.svg" slot="item-icon">
        <img src="./assets/img/profile_active.svg" slot="item-icon-active">
        <div slot="item-text">我的</div>
      </tab-bar-item>
     </tab-bar>
  </div>
</template>

<script>
import TabBar from './components/tabbar/TabBar'
import TabBarItem from './components/tabbar/TabBarItem'

export default {
  name: 'App',
  components: {
      TabBar,
      TabBarItem
  }
}
</script>

<style>

@import url('./assets/css/base.css');


</style>

最终效果：
在这里插入图片描述

④：加入颜色动态控制：

首次，我们通过判断当前活跃路由来决定isActive的值：
这里我们写一个计算属性：

computed:{
   isActive() {
    //  判断当前活跃的路由里面有没有这个路径
     return this.$route.path.indexOf(this.path) !==-1
   }
}

   <div  v-if="!isActive"><slot name="item-icon"></slot></div>
   <div v-else> <slot name="item-icon-active"></slot></div>
   <div :class="{active:isActive}"><slot name="item-text"></slot></div>

这样就能动态控制当前路由变色：
在这里插入图片描述

但是颜色也不能写死，所以这里要删掉active class，因为父传子的变量不能用于css，所以这里只能动态绑定style而不是class。
再写一个计算属性：

computed:{
   isActive() {
    //  判断当前活跃的路由里面有没有这个路径
     return this.$route.path.indexOf(this.path) !==-1
   },
   activeStyle() {
     return this.isActive ? {color: this.activeColor} : {}
   }
 },

<div :style="activeStyle"><slot name="item-text"></slot></div>

然后就可以动态传进颜色：

<tab-bar-item path="/home" activeColor="#ff5777">
	<img src="./assets/img/home.svg" slot="item-icon">
	<img src="./assets/img/home_active.svg" slot="item-icon-active">
	<div slot="item-text">首页</div>
 </tab-bar-item>

最后 对app.vue里面的代码再做一次抽取：
在components里面新建一个maintabbar->MainTabBar.vue
但是在抽取之前需要考虑一个问题：抽取之后文件的路径又要全部改一遍
我们可以在创建项目的时候就在webpack.base.conf.js文件里给文件夹取别名：
在这里插入图片描述
在这里插入图片描述
MainTabBar.vue:

<template>
 <tab-bar>
       <!-- 这里传递路由 因为是一个固定值 不用动态绑定 -->
      <tab-bar-item path="/home" activeColor="#ff5777">
         <img src="assets/img/home.svg" slot="item-icon">
         <img src="assets/img/home_active.svg" slot="item-icon-active">
         <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/category" activeColor="#ff5777">
        <img src="assets/img/category.svg" slot="item-icon">
        <img src="assets/img/category_active.svg" slot="item-icon-active">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="#ff5777">
        <img src="assets/img/cart.svg" slot="item-icon">
        <img src="assets/img/cart_active.svg" slot="item-icon-active">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile" activeColor="#ff5777">
        <img src="assets/img/profile.svg" slot="item-icon">
        <img src="assets/img/profile_active.svg" slot="item-icon-active">
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
</template>

<script>
import TabBar from '@/components/tabbar/TabBar'
import TabBarItem from '@/components/tabbar/TabBarItem'
 export default {
  name: '' ,
  components: {
    TabBar,
    TabBarItem
  },
 data () {
 return {
  }
 }
}

</script>
<style>
</style>

抽取之后的app.vue:

<template>
  <div id="app">
    <router-view></router-view>
    <main-tab-bar/>
  </div>
</template>

<script>
import MainTabBar from '@/components/maintabbar/MainTabBar'

export default {
  name: 'App',
  components: {
    MainTabBar
  }
}
</script>

<style>

@import url('./assets/css/base.css');

</style>
小何同学－
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuejs第五篇（vue-router路由和tabbar）
m0_57249797的博客
10-06 871
一、vue-router-安装和配置方式 二、路由映射配置和呈现出来 三、路由的默认值和修改为history模式 四、router-link的其他属性补充 五、通过代码跳转路由 六、vue-router-动态路由的使用 七、vue-router-打包文件的解析 八、vue-router-路由懒加载的使用 九、vue-router-路由的嵌套使用 十、vue-router-参数传递一 十一、vue-router-参数传递二 十二、vue-router-router和route的由来 十三、vue-router
vue3 taro-ui-vue3 封装Tabbar组件
weixin_43761212的博客
03-25 3545
提示：使用 vant-weapp,Taro,vant-weapp,vue3 文章目录前言一、创建 Tabbar组件二、页面引入1.目录结构 前言 提示：请在 app.config.ts 文件内引入： usingComponents: { "van-button": "@vant/dist/button/index", "van-icon": "@vant/dist/icon/index", "van-tabbar": "@vant/dist/tabbar/index", .
vue自定义tab导航栏（方法一）
最新发布
weixin_72671719的博客
04-01 593
八、上自定义tab代码（layoutIndex.vue）成功自定义tab导航栏！基本架子，内置自定义底部导航栏代码。三、安装Vue Router。一、引用Vant 4组件库。六、 配置router内容。二、快速上手Vant4。九、配置App.vue。
vue-router使用详解以及tabbar实现思路
思月行云
09-02 334
to：用于指定跳转的路径tag：tag可以指定之后渲染成什么组件，比如我们下面的代码会被渲染成一个元素，而不是。replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
vue封装底部tabbar
liuli0927的博客
07-01 226
vue实现底部导航切换
Vue从零开始封装一个tabbar
千里小马哥的博客
02-11 351
首先，底部菜单栏最外层是一个div，在div中整体上存在四个或五个小div，每个div中包含icon和text，如下图 对于每一个icon对象，它包含图标以及文字，但十实际中我们肯定不会将img和text写死，以及处于active状态时text的颜色也不会写死，以方便调用者传入想要的参数，这样才算一个彻底的封装。代码如下： <template&g...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
全局直接使用js调用 this.$confirmation() 调用通用提示弹窗可二次封装 点击确认取消后 会有相应的回调 利用的Promise封装的
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
vue学习之Vue-Router用法实例分析
11-28
Vue-router就像一个路由器，将组件(components)映射到路由(routes)后，通过点击<router>它可以在<router>中将相应的组件渲染出来。 1、使用vue-router的步骤 //1、创建路由组件 const Link1={template:'#link1'};...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
VueJs路由跳转——vue-router的使用详解
10-20
本篇文章主要介绍了VueJs路由跳转——vue-router的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue自定义底部导航栏Tabbar的实现代码
10-18
主要介绍了vue自定义底部导航栏Tabbar的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
TabBar-component:使用Vue封装的TabBar组件
03-19
标签栏 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
Vue实现tab切换
lvff的博客
08-10 2341
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://unpkg.com/vue"></script> <style> *{margin:0;padding:0;} body{padding:15px;} a{tex
使用vue和vue-router实现单页应用底部tab切换
im_dogg的博客
07-16 2030
仿照淘票票App做了一个底部的tab切换，目前大多数App都是使用这种方式切换的，先看图 1.基础栈：Vue、 Vue-router 、vue-cli、Vue.js devtools、npm、webpack 2.代码下载连接和安装方式：https://github.com/Hbuilderx/vue-tab-slide 3.使用方式看README.md文件，代码都有功能注释 ...
vue----页面跳转隐藏tabbar
hjy170314的博客
11-08 2256
在路由配置页面 import Vue from 'vue' import VueRouter from 'vue-router' import { Home, List, Order, My, goodsDetail } from '../views/index.js' Vue.use(VueRouter) const routes = [ { path: '/'...
解决vue路由跳转了但界面不显示问题
热门推荐
Charis--Cai
07-18 1万+
没有在父路由加上router-view，加上下面的代码即可。 <!-- 路由匹配到的组件将显示在这里 --> <router-view></router-view>
vue tabbar组件
weixin_52651045的博客
11-19 870
底部导航栏切换 直接上代码 使用props接受每个页面传递过来的tabKey 子组件内容 <template> <div class="tabbar"> <div class="placegolder-container"></div> <div class="bottom-tabs"> <div class="tabs-item" v-for="(item, index) in tabsList" :key.
vue的底部tab切换 以及图片的变化 两种方式
jdBug
04-15 2870
<template> <div class="footbar"> <router-link to='/' tag='div'> <span> <img :src="this.$route.path=='路径'?'选中的图片':'未选中的图片'" alt=""> </...
vue app.vue 只放一个 router-view
09-21
在Vue的App.vue文件中只放一个router-view是常见的做法，特别是在使用Vue Router进行路由管理时。这样做可以让App.vue作为根组件，负责渲染当前路由所对应的组件。 通过在App.vue中只放一个router-view，可以实现页面的动态切换和组件的复用。在Vue Router的配置中，每个路由对应一个组件，当切换路由时，router-view会根据当前路由匹配到的组件进行渲染。 下面是一个示例： ```html <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: "App", }; </script> <style> #app { width: 100%; height: 100%; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值