第一步   在app.vue中

<router-view class="b" name="header"> </router-view>

<router-view class="b" > </router-view> //不写name名字的就是默认路由

<router-view class="b" name="footer"> </router-view>

第二步 在router.js中

router.js

//引入组件

import header from  './components/header.vue'

import footer from './components/footer.vue'

let router =new VueRouter({

  routers:[

{

      path:'/',

      components:{    //components写多个必须加s,不然会报错

        header:header

        deafult:footer

        footer:footer

        }

      },

  ]

})

*一次加载三个组件

vue多视图的更多相关文章

  1. vue命名视图实现经典布局

    vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. vue路由 视图命名

    <body> <div id="app"> <p @click="go">hello app!</p> < ...

  3. [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

    记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊 ...

  4. vue 路由视图,router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  5. vue 命名视图

    命名视图 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命 ...

  6. vue 控制视图

    <!--第一种:点击改变容器的值--> <li> <a href="javascript:void(0)" @click="state.bo ...

  7. VUE 数据更新 视图没有更新

    3.还有个小技巧 当数据已经更新了 但是视图没有更新的时候  比如 这里  视图并没有更新 说明aa这个方法中没有触发视图更新 只要这里面随便一个对象能触发更新 则所有的视图更新都会生效 在data中 ...

  8. VUE数据更新视图不更新的原因

    当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 数组更新只能通过 ...

  9. 记 · ElemetnUI + Vue v-if 视图切换踩过的那些坑

    使用EleUI 做一个用户登录窗口,需要用v-if 动态切换三个表单:手机登录.账密登录和密码找回.其中需要实现一个重置表单的功能,但其间出了一些小bug.密码找回表单中有三个表单项,手机登录和账密登 ...

随机推荐

  1. hdu5475(线段树单点修改,统计区间乘积)

    题目意思: 给定a*b*c*d*e*f*....,可以在某一步去掉前面的一个因子,每次回答乘积. #include <cstdio> #include <cstring> #i ...

  2. Windows服务使用log4net记录日志

    该文章是系列文章 基于.NetCore和ABP框架如何让Windows服务执行Quartz定时作业 的其中一篇. 比较流行的日志组件有以下四种,Topshelf都有相应的组件提供 log4net NL ...

  3. bzoj1233 [Usaco2009Open]干草堆tower 【单调队列dp】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1233 单调队列优化的第一题,搞了好久啊,跟一开始入手斜率优化时感觉差不多... 这一题想通了 ...

  4. 扩展KMP的应用

    扩展KMP的应用: 给出模板串S和串T,长度分别为Slen和Tlen,要求在线性时间内,对于每个S[i](0<=i<Slen),求出S[i..Slen-1]与T的 最长公共前缀长度,记为e ...

  5. Kay and Snowflake CodeForces - 686D

    Kay and Snowflake CodeForces - 686D 题意:给一棵有根树,有很多查询(100000级别的),查询是求以任意一点为根的子树的任意重心. 方法很多,但是我一个都不会 重心 ...

  6. Linux环境下HDFS集群环境搭建关键步骤

    Linux环境下HDFS集群环境搭建关键步骤记录. 介质版本:hadoop-2.7.3.tar.gz 节点数量:3节点. 一.下载安装介质 官网下载地址:http://hadoop.apache.or ...

  7. HBase简介(很好的梳理资料) 转

    一. 简介 history started by chad walters and jim 2006.11 G release paper on BigTable 2007.2 inital HBas ...

  8. SP CAML工具

    直接一直使用CAML做一些简单的SP列表查询,突然想对CAML进一步了解,于是找到两个常用工具,做以记录: 1 Caml Query Builder : 用于编写CAML查询,对初学者可以了解查询语句 ...

  9. AJPFX:关于面向对象的封装

    1.回顾        面向对象 -- 注重的是结果,强调的是具备功能的对象.        面向过程 -- 强调的是函数,注重的实现的过程.        函数:对功能的封装.            ...

  10. Tomcat源码分析----eclipse中搭建源码环境

    前提:JDK,至少1.7,ant,要设置ANT_HOME环境变量,需要再classpath中增加ant的lib目录,在path变量中增加ant的bin目录 1.官网下载tomcat源码包:apache ...