Vue路由-命名视图实现经典布局
Vue路由-命名视图实现经典布局
相关Html:
<!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>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
.header {
background-color: orange;
height: 80px;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
}
.container {
display: flex;
height: 600px;
}
.left {
background-color: lightgreen;
flex: 2;
}
.main {
background-color: lightpink;
flex: 8;
}
</style>
</head>
<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">Header头部区域</h1>'
}
var leftBox = {
template: '<h1 class="left">Left侧边栏区域</h1>'
}
var mainBox = {
template: '<h1 class="main">mainBox主体区域</h1>'
}
// 创建路由对象
var router = new VueRouter({
routes: [
/* { path: '/', component: header },
{ path: '/left', component: leftBox },
{ path: '/main', component: mainBox } */
{
path: '/', components: {
'default': header,
'left': leftBox,
'main': mainBox
}
}
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
</html>
Vue路由-命名视图实现经典布局的更多相关文章
- Vue学习笔记【29】——Vue路由（命名视图实现经典布局）
命名视图实现经典布局 标签代码结构: <div id="app"> <router-view></router-view> < ...
- vue命名视图实现经典布局
vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- vue路由--命名视图
有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命名的视图, ...
- Vue系列之 => 命名视图实现经典布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- VUE router-view 页面布局 （嵌套路由+命名视图）
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...
- vue路由--命名路由
有时我们通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候.你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称. 我们直接在路由下 ...
- [vue]vue路由篇vue-router
spa单页开发及vue-router基础: https://www.cnblogs.com/iiiiiher/p/9034496.html url两种传参方式 query: $route.query ...
- Vue路由讲解
1>router-link和router-view组件 2>路由配置 a.动态路由 import Home from "@/views/Home.vue"; expor ...
随机推荐
- qt编程遇到的东西
setWindowFlags http://blog.chinaunix.net/uid-23500957-id-3876399.html move()方法,的作用是设置QWidget部件的pos坐标 ...
- Spring 、 CXF 整合 swagger 【试炼】
官网:http://swagger.io/ http://swagger.io/specification/ 上面就是描述了什么是 SWAGGER OBJECT 2. 如何用jax-rs 注解方式产生 ...
- day11(多线程,唤醒机制，生产消费者模式，多线程的生命周期)
A:进程: 进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. B:线程: 线程是进程中的一个执行单元,负责当前进程中程序的执 ...
- 从窗口句柄得到菜单句柄（从HWND得到HMENU）
1. 如果HWND是主窗口,可以使用API: GetMenu(...) 得到属于主窗口的句柄,原型如下: HMENU GetMenu(HWND hWnd); 在MFC中原型如下: CMenu* Get ...
- Sharepoint 安装部署Project Server
#在SharePoint Central Administration-> Manage service applications中,点击New button,选择Project Service ...
- Android 实现界面(Activity)的跳转
界面跳转 如,我想重一个界面A跳转到界面B,可以用,setContentView(R.layout.activity_login); 但是他其实只是将改界面铺在了最顶层,而按menu这些菜单其实还是底 ...
- LeetCode142：Linked List Cycle II
题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...
- JPA注解指南
PA注解持久化类很方便,需要jar包:ejb3-persistence.jar.我用以下三个类来说明用法. @SuppressWarnings("serial") @Entity ...
- sql表与表之间的数据操作
--把一张表的内容更新到另一张表 update 表1 set 表1.Store=t2.Name from 表2 t2 where 表1.id=t2.id --备份一张表 create table ta ...
- ABP框架入门踩坑-添加实体
添加实体 ABP踩坑记录-目录 这里我以问答模块为例,记录一下我在创建实体类过程中碰到的一些坑. 审计属性 具体什么是审计属性我这里就不再介绍了,大家可以参考官方文档. 这里我是通过继承定义好的基类来 ...