1、底部有分类布局

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

{
            path: '/',
            redirect: '/shop'
        },
        {
            path: '/shop',
            name: 'shop',
            component: shop,
        },
        {
            path: '/zan',
            name: 'zan',
            component: zan,
        },
        {
            path: '/main',
            name: 'main',
            component: main,
        },

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

 这是商家详情页。

这个页面中有: 顶部、中间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. Linux之浅谈VIM常见用法及原理图

    本次归纳以强大的VIM文本处理工具常见用法去展开论述. 文本编辑种类:       行编辑器:sed       全屏编辑器:nano,vi        vim - Vi改进 其他编辑器:     ...

  2. 56.doc values

    主要知识点 doc values     搜索的时候,要依靠倒排索引:在54小节中写到在聚合排序的时候如果仅仅依靠倒排索引的话是不能得出准确的结果的,需要依靠正排索引,所谓的正排索引,其实就是doc ...

  3. 12.IDEA中自动导资源包

    在idea工程中,当你赋值一个类文件的部分代码,粘贴到另一个文件中时,需要导入原来文件中的包资源, 自动设置如下

  4. Appendix B: Netsh Command Syntax for the Netsh Firewall Context

    11 out of 19 rated this helpful - Rate this topic Published: December 17, 2004 The following Netsh c ...

  5. RMAN主要命令 show,list,crosscheck,delete详解

    Oracle RMAN 的 show,list,crosscheck,delete命令整理  Oracle RMAN 的 show,list,crosscheck,delete命令整理 1.SHOW命 ...

  6. Porting from Oracle to MySQL

    A potential customer asked my about porting her application from Oracle Database to MySQL. I always ...

  7. HDU 5174

    题意有点不明白,因为MAX为int最大值,推测为64位,AC #include <cstdio> #include <iostream> #include <cstrin ...

  8. [Angular] Freshness Caching Policy - Network First, Cache Last

    In some cases, you want to get fresh data instead of cache data to the screen, such as stock applica ...

  9. HDU 5358(2015多校联合训练赛第六场1006) First One (区间合并+常数优化)

    pid=5358">HDU 5358 题意: 求∑​i=1​n​​∑​j=i​n​​(⌊log​2​​S(i,j)⌋+1)∗(i+j). 思路: S(i,j) < 10^10 & ...

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

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