vue命名视图实现经典布局
vue命名视图实现经典布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<style>
.header{
background-color: orange;
height: 80px;
}
h1{
margin: 0;
padding: 0
}
.container{
display: flex;
flex: 2
}
.left{
background-color: red;
height: 800px
}
.main{
background-color: aqua;
flex: 8;
height: 800px
}
</style>
<body>
<div id="app">
<router-view ></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
var header={
template:'<h1 class="header">头部区域</h1>'
}
var leftBox={
template:'<h1 class="left">left区域</h1>'
}
var mainBox={
template:'<h1 class="main">main区域</h1>'
}
var router=new VueRouter({
routes:[
{ path: '/', components: {
'default':header,
'left':leftBox,
'main':mainBox
}
}, ]
})
var vm=new Vue({
el:'#app',
data:{},
methods: { },
router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件
})
</script>
</body>
</html>
vue命名视图实现经典布局的更多相关文章
- Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue学习笔记【29】——Vue路由（命名视图实现经典布局）
命名视图实现经典布局 标签代码结构: <div id="app"> <router-view></router-view> < ...
- Vue系列之 => 命名视图实现经典布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- vue 命名视图
命名视图 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命 ...
- VUE router-view 页面布局 （嵌套路由+命名视图）
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue路由--命名视图
有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命名的视图, ...
- 062——VUE中vue-router之命名视图的实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
随机推荐
- return *this和return this有什么区别？
return *this返回的是当前对象的克隆或者本身(若返回类型为A, 则是克隆, 若返回类型为A&, 则是本身 ). return this返回当前对象的地址(指向当前对象的指针). 转: ...
- 命令行神器之argparse使用笔记
示例 废话不多说直接给例子: import argparse parser = argparse.ArgumentParser(description='Imbalanced Dataset Exam ...
- 使用docker中mysql镜像
1.拉取mysql镜像 docker pull mysql:5.6 2.运行mysql的镜像生成一个正在运行的容器,可以通过docker contain ls得到容器的id信息 docker run ...
- FTP、FTPS和SFTP
FTP 一.两种传输方式 ASCII传输方式 假定用户正在拷贝的文件包含的简单ASCII码文本,如果在远程机器上运行的不是UNIX,当文件传输时ftp通常会自动地调整文件的内容以便于把文件解释成另外那 ...
- 【转载】npm查看全局安装过的包
在使用node的时候,用npm安装了很多软件,过一段时间没有使用就会忘记,怎么查看自己全局安装过的包,用命令 npm list -g --depth 在百度里搜不到结果的,我在google里老外的文章 ...
- #10038.A Horrible Poem
#10038.A Horrible Poem 题目传送门 思路解析 既然这道题目在hash板块里,那么自然就可以想到用hash做这道题目. 首先我们可以用hash数组存储字符串的前缀的hash值. 因 ...
- JDBC编程六部曲
今天初学jdbc,明白了大致的编程流程,在此总结一下: JDBC编程可以分为六步——六部曲: * 第一步:注册驱动. * 1.1 获取驱动对象 * 1.2 注册驱动 * 第二步:获取数据库连接 * 第 ...
- 关于Java中static关键字的用法以及从内存角度解析
在Java中,static可以用来修饰成员变量和成员方法. 修饰成员变量,称为静态成员方法 修饰静态方法,称为静态成员方法 搞清楚用法和区别之前,先搞清static声明的变量和普通非静态变量在内存的分 ...
- 处理 oracle 数据库导入报错“IMP-00058: 遇到 ORACLE 错误 942”
在导入数据文件的时候出现了下图错误: 经过多次百度搜索问题.得知问题错误方向: 仔细的查询了被导入数据的数据库的版本: 而 被导入的数据包 dmp 文件是从 oracle11g r2的版本导出的. 所 ...
- [原创]基于Zynq SDIO WIFI 2.4G/5G SotfAP STA
支持正基WiFi模块.高通WiFi模块: 2.4G速率: 5G AC速率: 支持SoftAP.STA模式: