1、底部有分类布局

类似这种底部有分类的,点击四个tap分别道不同的页面这样的,每个页面都是一个路由,把底部作为一个组件在每一个页面中引入就行。组件就是公用的,能公用的就写成组件。如下

  1. {
  2. path: '/',
  3. redirect: '/shop'
  4. },
  5. {
  6. path: '/shop',
  7. name: 'shop',
  8. component: shop,
  9. },
  10. {
  11. path: '/zan',
  12. name: 'zan',
  13. component: zan,
  14. },
  15. {
  16. path: '/main',
  17. name: 'main',
  18. component: main,
  19. },

然后在首页商品点击某一个商家进入商家页面,这也是一个路由并不是 首页的子路由。

 这是商家详情页。

这个页面中有: 顶部、中间tab切换、tab数据、底部。

中间的三个tab切换所到达的页面可以在做一层路由 变为2级路由。

vue项目布局的更多相关文章

  1. vue项目的骨架及常用组件介绍

    vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...

  2. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  3. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  4. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  5. vue项目全局引入vue-awesome-swiper插件做出轮播效果

    在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...

  6. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  7. vue 项目记录.路飞学城(一)

    前情提要: 通过vue 搭建路飞学城记录  一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...

  8. python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  9. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 【codeforces 798C】Mike and gcd problem

    [题目链接]:http://codeforces.com/contest/798/problem/C [题意] 给你n个数字; 要求你进行若干次操作; 每次操作对第i和第i+1个位置的数字进行; 将 ...

  2. 《编程导论(Java)&#183;2.1.2 啊,我看到了多态》-什么是多态(polymorphism)

    1.不明觉厉 很多人学习多态时,会认为. 之所以不明觉厉,由于多态的定义:事物存在的多种表现形态:而后,有人将重载(overload).改写(override).多态变量和泛型归结于同一个术语&quo ...

  3. C++编程-&gt;pair(对组)

    pair 是 一种模版类型.每一个pair 能够存储两个值.这两种值无限制,能够是tuple.vector ,string,struct等等. 首先来看一下pair的函数 初始化.复制等相关操作例如以 ...

  4. hdu 1002 A + B Problem II(大正整数相加)

    代码: #include<cstdio> #include<cstring> #define Min(a,b) ((a)<(b)?(a):(b)) using names ...

  5. 项目产品化——Excel数据库模板化导入(java)

    Excel导入可能是代码开发中比較常见的功能,一个项目假设有多个地方须要excel导入数据库.那么开发的工作量也将比較大,项目产品化过程中,将这么一个类似的功能进行封装合并也是必要的.封装好的代码仅仅 ...

  6. hdu 5411 CRB and Puzzle 矩阵高速幂

    链接 题解链接:http://www.cygmasot.com/index.php/2015/08/20/hdu_5411/ 给定n个点 常数m 以下n行第i行第一个数字表示i点的出边数.后面给出这些 ...

  7. RDLC报表钻取空白页问题

    在改动报表查询条件时,钻取页突然空白了,百思不得其解,之前好好的,研究了一个下午和一个晚上.查资料等等,网上非常多资料都是设置报表的 ConsumeConteinerWhitespace = True ...

  8. c22---枚举

    // // main.c // 枚举基本概念 #include <stdio.h> int main(int argc, const char * argv[]) { // int sex ...

  9. spark 决策树分类算法demo

    分类(Classification) 下面的例子说明了怎样导入LIBSVM 数据文件,解析成RDD[LabeledPoint],然后使用决策树进行分类.GINI不纯度作为不纯度衡量标准并且树的最大深度 ...

  10. Node.js:模块系统

    ylbtech-Node.js:模块系统 1.返回顶部 1. Node.js模块系统 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js 应用程序的 ...