第一步   在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. 【转载】OAuth的机制原理讲解及开发流程

    1.OAuth的简述 OAuth(Open Authorization,开放授权)是为用户资源的授权定义了一个安全.开放及简单的标准,第三方无需知道用户的账号及密码,就可获取到用户的授权信息,并且这是 ...

  2. Android系统中setprop,getprop,watchprops命令的使用(转载)

    转自:http://blog.csdn.net/yao_guet/article/details/6531241 在android系统中,有一些初始化的配置文件,例如: /init.rc /defau ...

  3. 点击button传递消息,但是页面不跳转的解决方法

    最近在做一个物联网的项目时遇到的问题:界面上有很多控制开/关灯的button,通过点击button来控制各个灯的亮灭.我需要将获取的不同的点击事件消息,以Socket通信的方式发送给硬件端的服务监听程 ...

  4. python 37条编程技巧-汇总(转载+整理)

    1.原地交换两个数字 x, y =10, 20 print x, y y, x = x, y print x, y 10 20 20 10 2.链状比较操作符 n = 10 print 1 < ...

  5. 组合游戏 - SG函数和SG定理

    在介绍SG函数和SG定理之前我们先介绍介绍必胜点与必败点吧. 必胜点和必败点的概念:        P点:必败点,换而言之,就是谁处于此位置,则在双方操作正确的情况下必败.        N点:必胜点 ...

  6. Android Dialogs(3)警示Dialog教程[创建,单选,复选,自定义]等等

    本节内容 1. Building an Alert Dialog 2. Adding buttons 3. Adding a list 4. Adding a persistent multiple- ...

  7. 191 Number of 1 Bits 位1的个数

    编写一个函数,输入是一个无符号整数,返回的是它所有 位1 的个数(也被称为汉明重量).例如,32位整数 '11' 的二进制表示为 00000000000000000000000000001011,所以 ...

  8. 基于Ubuntu14.04下Suricata(一款高性能的网络IDS、IPS和网络安全监控引擎)的搭建(图文详解)(博主推荐)

    为什么,要写这篇论文? 是因为,目前科研的我,正值研三,致力于网络安全.大数据.机器学习研究领域! 论文方向的需要,同时不局限于真实物理环境机器实验室的攻防环境.也不局限于真实物理机器环境实验室的大数 ...

  9. [转]Oracle - 数据库的实例、表空间、用户、表之间关系

    本文转自:http://www.cnblogs.com/adforce/p/3312252.html 完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物 ...

  10. 在Stuts2中使用ModelDriven action

    在Struts2中,提供了另外一种直接使用领域对象的方式,那就是让action实现com.opensymphony.xwork2.ModelDriven接口.ModelDriven让你可以直接操作应用 ...