1、在主组件展示二级路由的组件内容,在App.vue中添加

<br>
<div class="container">
<!-- row 行排列 -->
<div class="row">
<!-- 小屏展示12列,中屏展示4列 -->
<div class="col-sm-12 col-md-4">
<router-view name="orderingGuide"></router-view>
</div>
<div class="col-sm-12 col-md-4">
<router-view name="delivery"></router-view>
</div>
<div class="col-sm-12 col-md-4">
<router-view name="history"></router-view>
</div>
</div>
</div>

2、在index.js中修改路由配置

{path: '/', name: 'homeLink', components:{
default:Home,
'orderingGuide':OderingGuide,
'delivery':Delivery,
'history':History
}},

  

 

vue项目1-pizza点餐系统6-路由精讲之复用router-view的更多相关文章

  1. 一 创建一个springboot项目之(微信点餐系统的设计与开发)

    第一步:收到项目需求,进行数据库表的设计. 1.角色的划分: 卖家:  订单,类目 买家:  商品列表 2.功能模块的划分: 商品:商品列表 订单:  订单创建,订单查询,订单取消 类目:基于管理的功 ...

  2. vue项目获取当前地址栏参数(非路由传参)

    项目中遇到一个需求,就是另一个管理系统带参直接单纯的跳转跳转到vue pc项目中的某个页面,后再初始化查询数据,参数以地址栏的形式传入 管理系统:打开新地址地址 let obj = { id: 21, ...

  3. vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏

    初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...

  4. 基于SpringBoot前后端分离的点餐系统

    基于SpringBoot前后端分离的点餐系统 开发环境:主要采用Spring boot框架和小程序开发 项目简介:点餐系统,分成卖家端和买家端.买家端使用微信小程序开发,实现扫码点餐.浏览菜单.下单. ...

  5. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  6. Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)

    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...

  7. vue项目中的常见问题(vue-cli版本3.0.0)

    一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...

  8. [课程设计]Scrum 2.0 多鱼点餐系统开发进度(第二阶段项目构思与任务规划)

    [课程设计]Scrum 2.0 多鱼点餐系统开发进度 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统WEB ...

  9. [课程设计]Scrum 3.1 多鱼点餐系统开发进度(第三阶段项目构思与任务规划)

    Scrum 3.1 多鱼点餐系统开发进度(第三阶段项目构思与任务规划) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到 ...

随机推荐

  1. 也谈HTTP协议

    HTTP(HyperText Transfer Protocol,超文转移协议,超文本传输协议的译法并不严谨.) 一.网络基础 TCP/IP 1.1 TCP/IP 协议族 TCP/IP 协议族是互联网 ...

  2. select * from (XXXXX)[字符]——写法解析

    步骤:1.先执行括号里的语句:查询 select id from three ,将查询出来的数据作为一个结果集 取名为 a2.然后 再 select * from a 查询a ,将 结果集a 全部查询 ...

  3. 大哥带的Orchel数据库时间盲注

    0X01Oracle基于延时的盲注总结 0x00 前言 oracle注入中可以通过页面响应的状态,这里指的是响应时间,通过这种方式判断SQL是否被执行的方式,便是时间盲注: oracle的时间盲注通常 ...

  4. android 对话框显示工具类

    这个工具类非常简单,但是将显示dialog的方法统一封装,能够大大减少代码重复 package com.ctbri.weather.utils; import android.app.AlertDia ...

  5. mvn deploy上传私服Nexus时遇到的坑--ReasonPhrase: Forbidden.

    用maven deploy上传jar包时,遇到了ReasonPhrase: Forbidden 错误,截图如下: 折腾了好久,终于解决,现把步骤简单记录如下: 1.自建仓库eagle-sky: 2.设 ...

  6. jQuery-validate插件初级篇

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  7. 20165218 《网络对抗技术》 Exp8 Web基础

    Exp8 Web基础 基础问题回答 (1)什么是表单 表单可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框.隐藏 ...

  8. jdbcType="DATE"和jdbcType=" TIMESTAMP"的区别

    原文: https://www.cnblogs.com/fswhq/p/jdbcType.html 当传入null值时,jdbcType 会防止null空指针异常报错 Mybatis 中jdbcTyp ...

  9. input 输入框效验

    input 输入框效验 1:只能输入正整数: <el-input v-model.number="formData.projectNum" type='number' min ...

  10. leetcode 590.N-ary Tree Postorder Traversal N叉树的后序遍历

    递归方法 C++代码: /* // Definition for a Node. class Node { public: int val; vector<Node*> children; ...