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 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
随机推荐
- 第十七节，OpenCV（学习六）图像轮廓检测
1.检测轮廓 轮廓检测是图像处理中经常用到的,OpenCV-Python接口中使用cv2.findContours()函数查找检测物体的轮廓. cv2.findContours(image, mode ...
- php跨域问题记录
记录跨域问题 一.问题 在控制层加了如下代码: header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN'] ); header('Ac ...
- 3D Slicer中文教程（七）—图像中值滤波
1.中值滤波概念 中值滤波是对一个滑动窗口内的诸像素灰度值排序,用其中值代替窗口中心象素的原来灰度值,它是一种非线性的图像平滑法,它对脉冲干扰级椒盐噪声的抑制效果好,在抑制随机噪声的同时能有效保护边缘 ...
- 云栖社区用机器人爬CSDN的文章？
这个云栖社区的文章https://yq.aliyun.com/ziliao/539322 这篇文章是我13年写的,不知道咋插入图片,见谅. 下面是我的文件记录 分享XAML图标的网站 原创 2013年 ...
- ASP Action函数 如何接收client传递的数据（编辑中。。。）
参看链接:https://www.cnblogs.com/umlzhang/p/3654486.html 我这里总结一下,Action的参数的来源比较多 1.url 2.路由设定 3.post中的内容 ...
- eclipse导入maven时，html页面引入js的路径出现红色波浪线
用eclipse导入一个springboot项目时,html页面引入js以及css时出现如下图所示情况,html页面用了 thymeleaf模板引擎.另外js文件与css文件路径也是正确无误的. 原来 ...
- 【mysql】 快速搞定数据库迁移
工具:navicat for mysql
- 末学者笔记--NFS服务和DHCP服务讲解
NFS服务端概述 一．概念: NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS:NFS允许一个系统在网络上与他 ...
- 基于 EntityFramework、Autofac 的 UnitOfWork 框架（一）
之前公司项目参考 NopCommerce 开发了一套系统,但是不支持 UnitOfWork,最近想开发新的项目,所以就基于原有的基础上又添加 UnitOfWork 支持,由于目前正在逐步完善中,所以可 ...
- 微软开源大规模数据处理项目 Data Accelerator
微软开源了一个原为内部使用的大规模数据处理项目 Data Accelerator.自 2017 年开发以来,该项目已经大规模应用在各种微软产品工作管道上. 据微软官方开源博客介绍,Data Accel ...