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. [luogu2624 HNOI2008]明明的烦恼 (prufer+高精)

    传送门 Solution 根据prufer序列做的题,具体可以看这里 还知道了一种避免高精除的方法quq Code #include <cmath> #include <cstdio ...

  2. Centos 7.x 源码编译搭建Nginx

    环境: centos 7 防火墙关闭 Selinx关闭 Nginx Web安装 安装依赖库 yum install pcre-devel pcre gcc gcc-c++ zlib zlib-deve ...

  3. NOIP 2016 换教室(期望dp)

    第一次做期望dp 并不知道每个阶段的期望之和就是整个的期望之和 所以一直卡在这 期望=代价*概率 然后注意只有申请了才算期望,否则按原来的. 这道题和前几个课程,申请的限制,当前选或不选,有关 这样很 ...

  4. tp5 权限设置

    ============================== <?php/** * Created by PhpStorm. * User: 14155 * Date: 2018/11/10 * ...

  5. mysql中explain用法和结果的含义

    explain  select * from user explain select * from user explain extended select * from user explain e ...

  6. Cocos Code IDE里xcodeprojectlua脚本更新

    lua脚本改动后xcode须要clean又一次编译才干更新,这个是xcode里的老毛病了,网上有一些脚本但不是针对Cocos Code IDE的project文件夹的,这里列出 cocos2dx版本号 ...

  7. Ruby的case语句

    Ruby的case语句 case语句使用的是===判断方式,可以进行更加广义的相等判断: 可以进行类型的判断,可以进行正则表达式的判断: array = ["a",1,nil] a ...

  8. netty 学习记录一

    近期在学习netty相关知识,认为<netty 权威指南>这本书还是挺好的,适合我这样的刚開始学习的人.加上netty本身自带的很多样例,学起来还是挺有兴趣的.简单记录下, 一般serve ...

  9. 屏幕測试亮点,新买了一个显示器,使用web简单的測试下了亮点

    1,购买了一个新的显示器 趁着双11的时候价格廉价.入手了一个显示器. http://serve.netsh.org/pub/dead_pixel.bin 滚动下就能够换颜色了.把chrome最大化, ...

  10. 安装visual studio 2013--【转】

    本文转载自:http://blog.csdn.net/tina_ttl/article/details/51544733#1下载-visual-studio-ultimate-2013安装包 1.下载 ...