博客
关于我
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 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
查看>>
MySQL 存储过程参数:in、out、inout
查看>>
mysql 存储过程每隔一段时间执行一次
查看>>
mysql 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>
Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
查看>>
Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
查看>>
Mysql 学习总结(89)—— Mysql 库表容量统计
查看>>
mysql 实现主从复制/主从同步
查看>>
mysql 审核_审核MySQL数据库上的登录
查看>>
mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
查看>>
mysql 导入导出大文件
查看>>
MySQL 导出数据
查看>>
mysql 将null转代为0
查看>>
mysql 常用
查看>>
MySQL 常用列类型
查看>>
mysql 常用命令
查看>>
Mysql 常见ALTER TABLE操作
查看>>
MySQL 常见的 9 种优化方法
查看>>
MySQL 常见的开放性问题
查看>>