博客
关于我
Vue.js-TabBar实现
阅读量:266 次
发布时间:2019-03-01

本文共 1363 字,大约阅读时间需要 4 分钟。

1.1 项目目录

创建项目: vue init webpack tabbardemo

1.2 项目实现代码

项目所需的图片: 提取码:bo79

App.vue

MainTabBar.vue

TabBar.vue

TabBarItem.vue

Cart.vue

Category.vue

Home.vue

Profile.vue

index.js

import Vue from 'vue'import VueRouter from "vue-router";const Home = () => import('views/home/Home')const Category = () => import('views/category/Category')const Cart = () => import('views/cart/Cart')const Profile = () => import('views/profile/Profile')// 1.安装插件Vue.use(VueRouter)// 2.创建路由对象const routes = [  {       path: '',    redirect: '/home'  },  {       path: '/home',    component: Home  },  {       path: '/category',    component: Category  },  {       path: '/cart',    component: Cart  },  {       path: '/profile',    component: Profile  }]const router =  new VueRouter({     routes,  // 使用history  mode: 'history'})// 3.导出routerexport default router

1.3 执行结果

1.4 路径简写

转载地址:http://fnjx.baihongyu.com/

你可能感兴趣的文章
MySQL如何实现ACID ?
查看>>
mysql如何记录数据库响应时间
查看>>
MySQL子查询
查看>>
Mysql字段、索引操作
查看>>
mysql字段的细节(查询自定义的字段[意义-行列转置];UNION ALL;case-when)
查看>>
mysql字段类型不一致导致的索引失效
查看>>
mysql字段类型介绍
查看>>
mysql字段解析逗号分割_MySQL逗号分割字段的行列转换技巧
查看>>
MySQL字符集与排序规则
查看>>
MySQL字符集乱码
查看>>
mysql字符集设置
查看>>
mysql存储IP地址的数据类型
查看>>
mysql存储中文 但是读取乱码_mysql存储中文乱码
查看>>
MySQL存储引擎
查看>>
MySQL存储引擎
查看>>
MySQL存储引擎--MYSIAM和INNODB引擎区别
查看>>
Mysql存储引擎(1):存储引擎体系结构和介绍
查看>>
Mysql存储引擎(2):存储引擎特点
查看>>
MySQL存储引擎--MyISAM与InnoDB区别
查看>>
mysql存储总结
查看>>