参考:https://blog.csdn.net/u011615787/article/details/80075240

参考:https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE

分别给router-view定义一个name,默认显示的可以不用定义

自己先在components文件夹内写4个组件,准备放入4个router-viewer标签,我的分别是

containerLeft.vue

containerRight.vue

containerTop.vue

containerBottom.vue

app.vue

<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<!-- <container-Left/> -->
<router-link to="/HelloWorld" > 222 </router-link>
<router-view/>
<router-view name="left" class="area left"/>
<router-view name="right" class="area right"/>
<router-view name="logo" class="area "/>
<router-view name="bottom" class="area bottom"/> </div>
</template> <script>
import containerLeft from './components/containerLeft.vue'
export default {
name: 'App',
components:{
containerLeft,
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* margin-top: 60px; */
}
.area{
width: 400px;
height:400px;
border:1px red soild;
position: absolute;
top:20px;
z-index: 1002;
}
.left{
left:0px;
top:100px;
}
.right{
right: 0px;
}
.bottom{
top: 90%;
width: 100%;
height: 30px;
}
</style>

路由文件router/index.js

核心:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Veaflet from '@/components/Veaflet'
import containerLeft from '@/components/containerLeft'
import containerRight from '@/components/containerRight'
import containerTop from '@/components/containerTop'
import containerBottom from '@/components/containerBottom'
import lefttree from '@/components/lefttree'
Vue.use(Router) // 创建一个路由器实例
// 并且配置路由规则
const router = new Router({
routes: [
{
path: '/',
name: 'Veaflet',
meta:{title:'Veaflet'},
components:{
default: Veaflet,
left:containerLeft,
right:containerRight,
logo:containerTop,
bottom:containerBottom
}
},
{
path: '/HelloWorld',
name: 'HelloWorld',
meta:{title:'HelloWorld'},
component: HelloWorld
},
{
path: '/containerLeft',
name: 'containerLeft',
meta:{title:'containerLeft'},
component: containerLeft
},
{
path: '/lefttree',
name: 'lefttree',
meta:{title:'lefttree'},
component: lefttree
}
] })
//修改动态网页标题 beforeEach 导航钩子,路由改变前触发
router.beforeEach((to,from,next) =>{
//window.document.title = to.meta.title;
window.document.title = to.name;
next();
})
router.afterEach((to,from,next) =>{
window.scrollTo(0,0);
})
export default router;

 运行效果如图:

vue同一个页面可以有多个router-view的更多相关文章

  1. vue通过ID(参数)修改URL复用同一个页面(组件)不重新加载的问题

    项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...

  2. vue 常见的新增、编辑、查看公用同一个页面

    用vue开发经常会碰到,一个功能的新增.编辑.查看公用同一个页面,如果是页面暂且不提. 但是弹框,很多人会发现,如果是点击编辑,取消,再点新增,弹框上面是会有残留数据的,为什么会这样呢,因为在点编辑的 ...

  3. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  4. Vue数据更新页面没有更新问题总结

    Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...

  5. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  6. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  7. vue缓存页面【二】

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法:运行结果描述:input输入框内,路由切换输入框内部的内容不会发生改变.在keep-alive标 ...

  8. vue同一页面中拥有两个表单时,验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法 ...

  9. 关于vue里页面的缓存

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变. 在keep-ali ...

随机推荐

  1. 使用crt连接linux慢

    1.主要原因是linux中启用了 修改sshd的配置文件把其中dns解析设置为no即可,操作如下: [root@dong ~]# vi /etc/ssh/sshd_config 查找: #UseDNS ...

  2. Luogu P2754 星际转移问题

    Luogu P2754 星际转移问题 思路 首先,对于地球能否到达月球的问题,考虑使用并查集维护. 对于每艘飞船能够到达的站点,放进一个集合里,若两艘飞船的集合有交集,那么就合并两个集合,最后只要地球 ...

  3. Java程序设计当堂测试感受

    开学第一周的周四,按照王主任的安排,进行了Java当堂测试,来检测暑假八周的学习成果.这一堂课真是让我哭笑不得,这一节课三个小时都在写代码,感觉暑假学的一点点代码什么都不是,写一个系统都完不成,感觉自 ...

  4. Day4 包机制 及JavaDoc文档.

    包机制 为了更好地组织类,java提供了包机制,用于区别类名的命名空间. 包的本质是文件夹 它语句的语法格式为: package pkg1[. pkg2 [.pkg3...] ] ; 一般利用公司域名 ...

  5. 【LeetCode】344. 反转字符串

    344. 反转字符串 知识点:字符串; 双指针 题目描述 编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改 ...

  6. 简单配置nginx反向代理,实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

  7. python基础之多线程的操作

    # 多线程实例# 例1.单线程from time import sleep,ctimedef task1(taskName): for i in range(2): print("正在执行 ...

  8. debian9 独显安装后进入不了桌面解决方法

    # apt-get purge nvidia. # /etc/init.d/sddm stop (sddm for kde) # aptitude --without-recommends insta ...

  9. python里的StringIO

    Python2中StringIO调用方法如下: import StringIO iost = StringIO.StringIO() Python3中已将StringIO归入io,调用方法如下: im ...

  10. 版本号是通过import合并而来的,不是继承来的