第一步   在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. 解决UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position xxx ordinal not in range(128)

    Python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...

  2. 小程序-demo:template

    ylbtech-小程序-demo: 1.返回顶部 1.app.js 2.app.json 3.app.wxss 4.project.config.json 5.pages 6.images 7. 2. ...

  3. supervisor - Python进程管理工具

    经常会碰到要写一些守护进程,简单做法放入后台: shell> nohup python xxx.py & 偶尔这么做还可以接受,如果一堆这样的呢? 当然还有一个问题,就是各种服务,对应的 ...

  4. 【黑金教程笔记之003】【建模篇】akuei2的Verilog hdl心路

    Verilog hdl不是“编程”是“建模” Verilog hdl语言是一种富有“形状”的语言. 如果着手以“建模”去理解Verilog hdl语言,以“形状”去完成Verilog hdl语言的设计 ...

  5. patch用法 (转载)

    转载:http://shenze60.blog.163.com/blog/static/315747722009724113026896/ 首先介绍一下diff和patch.在这里不会把man在线文档 ...

  6. idea运行scala有问题

    报这个错误:java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/m ...

  7. 使用node.js在sublime text3搭建服务器

    问题描述: 使用node.js在sublime text3中搭建好服务器后,第一次使用“ctrl+b”运行服务器没有问题,如图所示 如果想对test.js中的内容做些许修改,保存后再使用“ctrl+b ...

  8. python的安装教学

    1.首先登陆到python的官方网站 https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3. ...

  9. [Usaco2011 Feb]Generic Cow Protests

    Description Farmer John's N (1 <= N <= 100,000) cows are lined up in a row and numbered 1..N. ...

  10. Matlab实现Butterworth滤波器 分类: 图像处理 2014-06-02 00:05 527人阅读 评论(0) 收藏

    下面是用Matlab实现的Butterworth高通.低通滤波器. clc;clear all;close all; I=imread('cameraman.tif'); subplot(3,2,1) ...