这篇文章主要介绍了Vue封装一个Tabbar组件 带组件路由跳转方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue封装Tabbar组件
话不多说直接上代码
在App.vue 封装 路由跳转 利用router-view的特性
//引入子组件 把items 这个数组传进去
子组件Tabbar
//动态绑定// {{item.title}}
然后就是配置的路由
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home, meta:{ isShowTabbar:true } }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'), meta:{ isShowTabbar:true } } , { path: '/Cart', name: 'Cart', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Cart.vue'), meta:{ isShowTabbar:false } }, { path: '/Mime', name: 'Mime', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Mime.vue'), meta:{ isShowTabbar:true } }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router 最后的效果完成图
代码就直接可以用了
从零开始封装一个Tabbar
首先底部菜单栏最外层是一个div，
在div中整体上存在四个或五个小div，每个div中包含icon和text，如下图
对于每一个icon对象，它包含图标以及文字，但十实际中我们肯定不会将img和text写死，以及处于active状态时text的颜色也不会写死，以方便调用者传入想要的参数，这样才算一个彻底的封装。
代码如下
封装完每一个tabbaritem后
接下来是整体的tabbar，试想，我们肯定还是放入一个插槽代码如下：
tabbar预留的插槽则用于放入每一个item，我们在这里也是不能写死的，因为控件开发者并不知需要放入多少个item。
使用者在使用我们封装的控件时
则可以如下代码，放入内容：
到此结束。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。
以上就是Vue封装一个Tabbar组件 带组件路由跳转方式的详细内容，更多请关注0133技术站其它相关文章！
