小白学习vuejs-13持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情自

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

自学前端

前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是路由相关知识
- 这是基于我学习的笔记而来的文章

这次我们需要用到v-if, v-else, 路由, 插槽, 具名插槽, 父子组件通信, 等相关的知识, 这些知识都可以在Tabbar小项目中的到进一步的学习和理解, 让我们记得更牢固

如果在下方有一个单独的TabBar组件, 你如何封装
- 自定义TabBar组件, 在APP中使用
- 让TabBar处于底部, 并且设置相关的样式
TabBar中显示的内容由外界决定
- 定义插槽
- flex布局平分TabBar
自定义TabBarItem, 可以传入图片和文字
- 定义TabBarItem, 并且定义两个插槽: 图片, 文字.
- 给两个插槽外层包装div, 用于设置样式
- 填充插槽, 实现底部TabBar的效果
传入高亮图片
- 定义另外一个插槽, 插入active-icon的数据
- 定义一个变量isActive, 通过v-show来决定是否显示对应的icon
TabBarItem绑定路由的数据
- 安装路由: npm install vue-router --save
- 完成router/index.js的内容, 以及创建对应的组件
- main.js中注册router
- APP中加入组件
点击item跳转到对应路由, 并且动态决定isActive
- 监听item的点击, 通过this.$router.replace()替换路径
- 通过this.$router.path.indexOf(this.link)!==-1来判断是否是active
动态计算active样式
- 封装新的计算属性: this.isActive ? {'color': 'red'}:{}