第一步   在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. POJ3682;King Arthur's Birthday Celebration(期望)

    传送门 题意 进行翻硬币实验,若k次向上则结束,进行第n次实验需花费2*n-1的费用,询问期望结束次数及期望结束费用 分析 我们令f[i]为结束概率 \[f[i]=C_{i-1}^{k-1}*p^k* ...

  2. HDU1175:连连看(搜索)

    传送门 题意 给定一个n*m的矩阵,询问q次,两个方块是否能被消掉,弯折次数不超过两次 分析 这题写了有一个下午,思路很简单,但是有很多trick,(唉),我还是太弱 trick 初始判断:1.两点不 ...

  3. bzoj 4318: OSU!【期望dp】

    思路有点眼熟啊,就是设l1记录长为x的极长全1串贡献x的答案,l2记录长为x的极长全1串贡献x^2的答案,f记录真正的答案 转移的话根据n-(n-1)=1,n^2-(n-1)^2=2n-1,n^3-( ...

  4. bzoj 4247: 挂饰【dp】

    bzoj上访问负下标会跑到奇怪的地方-- 其实可以滚动数组优化,但是我看能过就懒得改了 设f[i][j]为已经算了前i个挂饰,当前有j个空的钩子,转移就是f[i][j]=max(f[i-1][j],f ...

  5. Oracle11.2.0.1升级到11.2.0.3

    Oracle数据库升级也并非简单的事,这篇博客,博主对Oracle那点事做了较详细的介绍: http://blog.itpub.net/9599/viewspace-473003/ 我还属于Oracl ...

  6. linux 查看进程和端口

    1.进程查看 #ps aux | grep java 2.查看系统与内核相关信息 #uname [-asrmpi] 查看系统位数 # uname -m 3.查看端口 #netstat [-aatunl ...

  7. 《windows核心编程系列 》六谈谈线程调度、优先级和关联性

    线程调度.优先级和关联性 每个线程都有一个CONTEXT结构,保存在线程内核对象中.大约每隔20ms windows就会查看所有当前存在的线程内核对象.并在可调度的线程内核对象中选择一个,将其保存在C ...

  8. Kubernetes集群认证

    1.集群搭建:https://www.kubernetes.org.cn/3808.html 2.集群验证:https://www.kubernetes.org.cn/1861.html

  9. [Usaco2017 Feb]Why Did the Cow Cross the Road III (Gold)

    Description 给定长度为2N的序列,1~N各处现过2次,i第一次出现位置记为ai,第二次记为bi,求满足ai < aj < bi < bj的对数 Sample Input ...

  10. 异或+构造 HDOJ 5416 CRB and Tree

    题目传送门 题意:给一棵树,问f (u, v) 意思是u到v的所有路径的边权值的异或和,问f (u, v) == s 的u,v有几对 异或+构造:首先计算f (1, u) 的值,那么f (u, v) ...