第一步   在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. hdu 1719

    Friend Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  2. pycharm中关于django和buildout的配置

    pycharm提供了对django和buildout的支持,具体的配置如下: 1.django support 在pycharm的settings中修改如下3个选项 1)django project ...

  3. Android Debuggerd 简要介绍和源码分析(转载)

    转载: http://dylangao.com/2014/05/16/android-debuggerd-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D%E5%92%8C%E ...

  4. 关于浮动与清浮动 float

    浮动常见的几种属性值 float {left;  right;  none;  } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...

  5. Spring Cloud Eureka配置文件例子与较为详细说明

    Eureka服务端: application.yml # eureka(最)简单单点开发配置.支持yml与properties两种,yml文件后缀必须为yml,不能是yaml,否则找不到该文件,使用默 ...

  6. 标准字符cp功能

    #include<stdio.h> #include<fcntl.h> int main(int argc,char *argv[]) { FILE *src_fp,*des_ ...

  7. Qt事件系统之一:Qt中的事件处理与传递

    一.简介 在Qt中,事件作为一个对象,继承自 QEvent 类,常见的有键盘事件 QKeyEvent.鼠标事件 QMouseEvent 和定时器事件 QTimerEvent 等,与 QEvent 类的 ...

  8. C++默认函数与函数重载

    一.默认参数 在C++中,可以为参数指定默认值.在函数调用时没有指定与形参相对应的实参时, 就自动使用默认参数. 默认参数的语法与使用:(1)在函数声明或定义时,直接对参数赋值.这就是默认参数: (2 ...

  9. 图论/暴力 Codeforces Beta Round #94 (Div. 2 Only) B. Students and Shoelaces

    题目传送门 /* 图论/暴力:这是个连通的问题,每一次把所有度数为1的砍掉,把连接的点再砍掉,总之很神奇,不懂:) */ #include <cstdio> #include <cs ...

  10. JDK6中System.getProperties返回键值说明

    JDK6中java.lang.System.getProperties()方法返回键值说明. 键 相关值的描述 java.version Java 运行时环境版本 java.vendor Java 运 ...