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. Springboot 构建http服务,返回的http行是'HTTP/1.1 200' 无状态码描述 客户端解析错误

    ————————————————————————————————————————— *** 响应的数据格式  HTTP/1.1 200 OK  Server: Apache-Coyote/1.1  A ...

  2. 使用Vue前端框架实现知乎日报app

    这是:主页代码 <template> <view class="content"> <view class="uni-list"& ...

  3. 在linux下搭建go环境

    这几天小Jerry开始接触Go语言了,因为小Jerry学个东西必须要从最基础的开始弄懂,不然~她理解不了<hahaha> 所以,今天就来讲最基础,却也很容易让小Jerry这样的菜鸟感到困扰 ...

  4. awk命令1

    [root@a ~]# awk 'END{print NR}' c.txt       #没错,这就是文件的行数,当然,这种统计方法不是linux下最快的,但也是一种思路3[root@a ~]# wc ...

  5. MySQL Online DDL工具

    MySQL在线表结构变更工具 MySQL的大表表结构变更常用的解决方案无外乎三种: 一是利用Percona的pt-online-schema-change,Facebook的OSC等三方工具, 二是在 ...

  6. python编译报错

    UnicodeDecodeError: 'ascii' codec can't decode byte 0xa3 in position 3:ordi 因为同时安装了python2和python3,所 ...

  7. 1、VMware安装步骤

    最后重启电脑

  8. 【linux】杀掉进程命令

    1.找到对应的进程 通过端口查找 lsof -i:端口号 netstat -tunlp | grep 端口   lsof -i:9500   netstat -tunlp | grep 9500 2. ...

  9. Jmeter之安装和配置

    一.Jmeter下载: 官网下载地址:http://jmeter.apache.org/download_jmeter.cgi 目前最新版本为5.0(未使用过),建议使用4.0 (存在两种格式的压缩包 ...

  10. Nil Channels Always Block(Go语言中空管道总是阻塞)

    译自:https://www.godesignpatterns.com/2014/05/nil-channels-always-block.html 原作者:Alex Lockwood 在本篇文章中, ...