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 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
随机推荐
- SVM小白教程（1）：目标函数
关于 SVM(支持向量机),网上教程实在太多了,但真正能把内容讲清楚的少之又少.这段时间在网上看到一个老外的 svm 教程,几乎是我看过的所有教程中最好的.这里打算通过几篇文章,把我对教程的理解记录成 ...
- Windows安装docker （带安装包）
docker安装包链接 链接:https://pan.baidu.com/s/1JBk8GCH6j_WeGdoaUuIoWw 提取码:8kgg 我电脑上有了git所以没有勾选最后一个 安装完成后将此目 ...
- Mark SDL2 Lazy Foo's Producations
重点 初学SDL2,此处为笔记.有错误还请指出. 13)When our SDL 2 application runs, the operating system needs to be able t ...
- 04mycat数据切分
自定义切分文件 [root@mycat mycat]# cat conf/customer-hash-int.txt 101=0 102=0 103=0 104=1 105=1 106=1 Rule. ...
- npm vue ivew vue-cli3
2019-4-10 10:56:20 星期三 学习iview时需要搭建一套node环境, 这里记录下来 1. 下载安装nodejs //自带了npm包管理器 2. 设置npm的全局配置: 全局包默认 ...
- Java中int和String类型之间转换
int –> String int i=123; String s=""; 第一种方法:s=i+""; //会产生两个String对象 第二种方法:s=S ...
- SQL08 清空日志文件语句
--1.先查询数据的日志文件的名称 USE lwlz_zhiluo GO SELECT name FROM SYS.database_files WHERE type_desc='LOG' --2.执 ...
- 最优的路线(floyd最小环）
问题描述 学校里面有N个景点.两个景点之间可能直接有道路相连,用Dist[I,J]表示它的长度:否则它们之间没有直接的道路相连.这里所说的道路是没有规定方向的,也就是说,如果从I到J有直接的道路,那么 ...
- 软件工程作业-(third)
1.选题目(1) 最大连续子数组和(最大子段和) 问题:给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的子段和的最大值. ...
- python的pandas库学习笔记
导入: import pandas as pd from pandas import Series,DataFrame 1.两个主要数据结构:Series和DataFrame (1)Series是一种 ...