vue初学笔记-tabbar的实现

新建项目后删掉hellowword的相关代码组件

第一步：在components里新建文件夹tabbar来装关于tabbar的组件

第二步：在tabbar文件夹中新建vue文件：Tabbar.vue

在Tabbar.vue中写好整个样式代码

      
首页
        
资料
        
活动
        
我的

第三步：导出当前vue

export default({
name:'Tabbar'
})

第四步：在app.vue中引入组件并注册

import Tabbar from 路径
 export default {
    name: 'App',
    components: {
      Tabbar
    }
  }

第五步：在app.vue中使用组件

第六步：在tabbar文件夹中新建文件：tabbarItem.vue

将tabbar.vue中以下内容剪切走用slot替换       

 
首页
 
关于
 
活动
 
我的

粘贴进tabbarItem.vue的templete中

删掉除首页外的其他div 留一个就可以了app.vue里面多次调用组件tabbarItem即可有四个菜单啦！

剪切div的时候记得要把 style里面对应的class样式剪切走哟！

然后记得也要export导出并且给一个name名字哟

第七步：在app.vue里面记得把tabbarItem.vue导入进来并且注册再使用组件哟！

这次使用组件可得嵌套在tabbar里面啦！有四个菜单咱们就放四个哟！

第八步：利用vue-router实现tab切换的效果

首先新建一个views文件夹，在文件夹内各自新建关于菜单的文件夹以及vue文件作为页面的显示

在router中配置跳转路径

首先箭头函数导入以上页面

const Home = () => import(‘../src/components/views/home/Home.vue’)
const routes = [
{
path:'/',
redirect:'Home'  //这是配置首页默认跳转显示哪个页面}，
{
path:'/home',
component:'Home'
}
]

第九步：路由配置完成后，完成监听下面菜单icon的点击

在组件TabbarItem中添加click事件监听点击

首页

app.vue 页面需要传值

这样点击下面菜单就会对应出来显示的页面辣。这个时候会出现一个小小的问题，重复点击同一个菜单时会报错：Avoided redundant navigation to current location:

解决办法：在index.js里面加上这段就解决辣！

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

这样切换就做好啦，那么接着我们要切换的时候变颜色咯

第十步：切换时选中状态的改变

因为不知道当前点击的究竟是哪个，所以没办法将当前的文字或者图片替换改变其他颜色。所以单纯的用isActive放在data里面去做已经不能满足我们的需求了。

那么怎么办呢小可爱 这里要用到$route  这个是当前哪一个路由处于活跃它就是哪个对象！

在tabbaritem组件中

我们判断当前活跃的path包含我当前点击的这个从app.vue中我传入的path，返回布尔值

首先建一个计算属性

首页

同时，我们的tabbaritem组件里的templete代码需要做出判断

   第十一步：将颜色封装起来，这样就不用改变颜色的时候去改动源码，而是动态的从外部去设置或者传值。

APP.Vue文件中的代码展示


tabbaritem.vue组件中的代码展示

OK，大功告成！完美！