vue商城-3.tabbar和路由配置

1.tabbar-四个主页面

image.png

1.1封装tabbar,可复用。

外层为一个组件：设置外层样式和插槽，可放置任何数量item。

image.png
单独的item为一个组件
　在item组件中处理：点击时切换路由和样式。其中路由路径和活跃状态颜色，在使用该组件时进行传值（props）。
　切换样式：通过当前路由和组件路由属性（to）是否一致，来判断是否处于活跃状态
　设置插槽：使用组件时设置文字和图片。

image.png

1.2使用封装好的组件：

image.png

1.3在App.vue中使用

image.png

总结：

1.tabbar和tabbaritem是分离的，如果是直接在tabbar中放四个item，使用时直接引入tabbar。如下

image.png

1.首先item数量是不固定的。
2.需要在tabbar中给item传值。
以上，如果这样封装，使用时还要在组件中改来改去，肯定达不到效果。

所以将tabbar和tabbaritem分离，使用时引入两个组件，利用各自的插槽写入数据即可。

封装:tabbar和tabbaritem
引入:mainbar(这一层是为让app.vue更简洁)
使用:app.vue

1.4配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from 'views/home/Home'
import Category from 'views/category/Category'
import Cart from 'views/cart/Cart'
import Profile from 'views/profile/Profile'
import Detail from 'views/detail/Detail'

Vue.use(Router)
// 解决双击路由报错
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const router=new Router({
 mode: 'history',
 // base: process.env.BASE_URL,
 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:'个人中心'
     }
   },
   {
     path:'/detail',
     component:Detail,
     meta:{
       title:'详情页'
     }
   }
   
 ]
});
// 设置页面title
router.beforeEach((to, from, next) => {
 //console.log(to);
 let title=to.meta.title;
 document.title=title;
 next();//必须调用
})

export default router