路由--命名视图实现经典布局
2020-01-14 15:34
106 查看
路由–命名视图实现经典布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.js"></script> <style> html,body{ margin: 0; padding: 0; } .header { background-color: orange; height: 100px; margin: 0 auto; } h1{ margin: 0; padding: 0; font-size: 16px; } .container{ display: flex; height: 531px; } .left{ background-color: #42b983; flex: 2; } .main{ background-color: white; 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头部区域hhhh</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 } } ] }) var vm = new Vue({ el: '#app', data: {}, methods: {}, router: router }) </script> </body> </html>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue学习笔记:7.4.路由-命名视图实现经典布局
- 26-路由命名视图实现经典布局
- 使用命名视图实现经典布局
- 路由实现经典布局
- [Vue] 九、使用名命视图实现经典布局!!!
- vue.js通过路由实现经典的三栏布局实例代码
- 详解vue-router 命名路由和命名视图
- DIV + CSS 实现最经典的布局
- 圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
- Laravel 4 初级教程之视图、命名空间、路由
- vue-router -- 命名路由和命名视图
- 利用div+css实现几种经典布局的详解,样式以及代码!
- Android批量图片载入经典系列——Volley框架实现多布局的新闻列表
- Android批量图片加载经典系列——Volley框架实现多布局的新闻列表
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
- 实现顶部轮播,下部listview经典布局的两种方式
- 实现顶部轮播,下部listview经典布局的两种方式
- css利用margin外部尺寸实现等高布局经典案例
- ArcEngine 实现数据视图和布局视图同步