18. vue-router案例-tabBar导航 (2)

下面来看看效果:
当我们设置isActive:false, 效果如下

当我们设置isActive:true, 效果如下:

可以看出, 我这里面就是把四张图片调换了一下顺序. 具体什么图片不重要, 重要的是效果出来了就好.

第二步: 实现文字激活时变色.

这个就更简单了.

<template> <div> <div v-if="!isActive"><slot></slot></div> <div v-else><slot></slot></div> <div v-bind:class="{active:isActive}"><slot></slot></div> </div> </template> <style scoped> ...... .active { color: red; } ...... </style>

直接绑定一个class样式, 当文字被激活时, 也就是isActive:true的时候, 文字显示红色
来看看效果:

以上就实现了tabBarItem的封装

三. 导航路由功能实现

现在tabBar导航已经完成了, 接下来, 我们点击首页, 应该展示首页组件内容. 点击分类应该展示分类组件内容.下面我们来具体实现这部分功能. 这就是导航的路由功能.

第一步, 安装路由组件 npm install vue-router --save

vue-router是一个运行时依赖, 所以需要加上--save参数

第二步: 创建router文件夹, 并创建index.js文件 // 第一步: 引入vue 和 vue-router包 import Vue from 'vue' import Router from 'vue-router' // 第二步: 安装Vue-router插件 Vue.user(Router) // 第三步: 创建Router组件 const route = [{ }] const vueRouter = new Router({ route: route }) // 第四步: 导出Route组件 export default vueRouter 第三步: 在main.js文件中引入vueRouter import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) }) 第四步: 规划项目结构

通常, 我们在components目录下放的都是所有公共组件模块. 那么页面相关的模块, 我们会在单独创建一个文件夹, 文件夹的名字可以叫views或者pages或者其他, 业务相关的页面都放着这个文件夹里面. 我们的项目目录结构如下:

我们在views下面又创建了4个目录, 分别来存放每一个导航组件的路由内容.

第五步: 添加路由

接下来要为导航配置路由

// 先引入组件 const Home = () => import('../views/home/Home') const Cart = () => import('../views/cart/Cart') const Category = () => import('../views/category/category') const Profile = () => import('../views/profile/profile') // 然后配置路由 const routes = [{ path: "", redirect: "/home" },{ path: "/home", components: Home },{ path: "/category", components: Category },{ path: "/cart", components: Cart },{ path: "/profile", components: Profile }] const router = new VueRouter({ routes })

这里配置了4个路由, 分别路由到对应的组件, 当空路由的时候, 定位到/home路由.
路由配好了, 接下来为按钮配置点击事件.
我们的tabBarItem组件封装以后是这样

<template> <div v-on:click="clickItem"> <div v-if="!isActive"><slot></slot></div> <div v-else><slot></slot></div> <div v-bind:class="{active:isActive}"><slot></slot></div> </div> </template>

我们在组件级别上增加一个点击事件, 但跳转的url是不固定的, 我们要通过参数传过来.

v-on:click="clickItem"

组件间传递数据使用props属性

<script> export default { name: "TabBarItem", props:["path"], data() { return { isActive: false } }, methods: { clickItem() { this.$router.push(path); } } } </script>

在组件中定义一个props属性, 使用itemUrl进行接收. 然后在组件调用的地方传递过来参数就可以了,
在TabBar中增加参数item-url="/home", 其他三个组件调用方式相同.

<tab-bar-item path="/home" > <img slot="item-pic" src=""> <img slot="item-pic-active" src=""> <div slot="item-name">首页</div> </tab-bar-item>

最后在App.vue中增加组件展示区域

<template> <div> <router-view></router-view> <tab-bar></tab-bar> </div> </template>

来看看效果

第六步: 设置按钮选中/取消选中的样式 <script> export default { name: "TabBarItem", props:["path"], computed: { isActive(){ return this.$route.path.indexOf(this.path) !== -1 } }, data() { return { // isActive: false } }, methods: { clickItem() { this.$router.push(this.path); } } } </script>