博客
关于我
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 日期函数
查看>>
mysql以服务方式运行
查看>>
mysql优化--索引原理
查看>>
mysql优化概述(范式.索引.定位慢查询)
查看>>
MySQL优化配置详解
查看>>
Mysql优化高级篇(全)
查看>>
mysql会员求积分_MySql-统计所有会员的最高前10次的积分和
查看>>
mysql会对联合索性排序优化_MySQL索引优化实战
查看>>
MySQL作为服务端的配置过程与实际案例
查看>>
Mysql使用命令行备份数据
查看>>
MySQL保姆级教程(SQL语法基础篇)从小白到高手的进阶指南,收藏这一篇就够了
查看>>
MySQL修改root密码的多种方法
查看>>
MySQL修改密码报错ERROR 1396 (HY000): Operation ALTER USER failed for ‘root‘@‘localhost‘
查看>>
Mysql全局优化参数
查看>>
MySQL全文索引实现简单版搜索引擎
查看>>
MySQL全面瓦解:安装部署与准备
查看>>
mysql共享锁与排他锁
查看>>
MySQL内存表使用技巧
查看>>
MySQL再叙(体系结构、存储引擎、索引、SQL执行过程)
查看>>
mysql出现错误的解决办法
查看>>