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. [Ynoi2011]D1T1

    题目大意: 给定一个序列$a_1,a_2,\dots,a_n$,进行$m$次操作,每次操作如下: 1. 给定$x,y,z$,对所有下标为$y,y+x,y+2x,\dots$的元素加上$z$(保证$y\ ...

  2. [BZOJ5072] 小A的树

    设计状态\(f[i][j]\)表示以i为根的子树,包含j个点的最小黑点数,\(g[i][j]\)表示以\(i\) 为子树,包含\(j\)个点的最大黑点数,然后树形背包转移即可. 每次询问的时候就看包含 ...

  3. 爬取表格类网站数据并保存为excel文件

    本文转载自以下网站:50 行代码爬取东方财富网上市公司 10 年近百万行财务报表数据 https://www.makcyun.top/web_scraping_withpython6.html 主要学 ...

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

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

  5. BeanUtils.copyProperties()错误使用,给自己挖了坑

    场景:需要对某个集合中的所有元素拷贝到另一个集合中,想着BeanUtils.copyProperties()可以深拷贝对象,误以为也可以拷贝集合,于是乎写下了如下代码 List<CostRule ...

  6. 用vue2.x注册一个全局的弹窗alert组件、confirm组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  7. TotoiseSVN使用教程

    TortoiseSVN百科 TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目录.文件保存在中央版本库,除了能记住文件和目录的每次修改以外, ...

  8. sqlserver日志文件太大解决方法

    SQL Server 的事务日志意外增大或充满的处理方法 事务日志文件Transaction Log File是用来记录数据库更新情况的文件,扩展名为ldf. 在 SQL Server 7.0 和 S ...

  9. hdu 2897简单博弈

    #include<stdio.h> int main() {     int n,p,q,k;    while(scanf("%d%d%d",&n,& ...

  10. 0123简单配置LNMP

    简单配置LNMP不怕出现错误,就怕错误不知道出现在哪里?看日值tail -f /var/log/message -- 系统整个的日志tail -f /var/log/nginx/error.log - ...