第一步   在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. Lightoj 1068(数位DP)

    求一段区间中被k整除,各个位数相加之和被k整除的数的个数. 这不是重点,重点是k太大了,最大值有10000,所以不能直接开那么大的数组. 仔细分析一下可以发现,由于数最大是2的31次方(2147483 ...

  2. P3398 仓鼠找sugar 又一次血的教训

    做什么题都要注意数组的大小,不要犯下数组越界的错误(温馨(狠心)提示): 做了好多遍就是不对,原来是[20]的数组,在for下循环1——>20,神奇爆零: 链接:https://www.luog ...

  3. JSP指令--include指令(静态包含)

    转自:https://blog.csdn.net/chentiefeng521/article/details/51802319 include指令         include指令是文件加载指令, ...

  4. Java Socket线程的设计原理介绍

    转自:http://developer.51cto.com/art/201003/190001.htm Java Socket线程我们经常会用到的技术,但是有很多程序员还是有不少的使用问题,下面我们就 ...

  5. 在Centos中yum安装和卸载软件的使用方法(转载)

    转自: http://gzmaster.blog.51cto.com/299556/72278 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. ...

  6. poj 2987 Firing【最大权闭合子图+玄学计数 || BFS】

    玄学计数 LYY Orz 第一次见这种神奇的计数方式,乍一看非常不靠谱但是仔细想想还卡不掉 就是把在建图的时候把正权变成w*10000-1,负权变成w*10000+1,跑最大权闭合子图.后面的1作用是 ...

  7. UVA - 10859 Placing Lampposts 放置街灯

    Placing Lampposts 传送门:https://vjudge.net/problem/UVA-10859 题目大意:给你一片森林,要求你在一些节点上放上灯,一个点放灯能照亮与之相连的所有的 ...

  8. 小程序各种授权封装、saveImageToPhotosAlbum、chooseAddress、getUserInfo、getLocation,保存图片、获取用户信息、获取位置信息、收货地址等

    代码略多,请异步 github __点击链接

  9. ios开发-常见的项目文件介绍

    一.项目文件结构示意图 二.文件介绍 1.products文件夹:主要用于mac电脑开发的可执行文件,ios开发用不到这个文件 2.frameworks文件夹主要用来放依赖的框架 3.test文件夹是 ...

  10. (三)python函数式编程

    一.高阶函数 高阶函数英文叫Higher-order function.什么是高阶函数?我们以实际代码为例子,一步一步深入概念. 变量可以指向函数 结论:函数本身也可以赋值给变量,即:变量可以指向函数 ...