Vue--一个页面实现多个同级组件---命名视图实现经典布局(头部,左右布局)
2023-09-11 14:18:36 时间
<!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-router
- Vue- 绑定的图片不显示
- vue父组件调用子组件资源
- vue.js3:色调色相调整并保存(vue@3.2.37)
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue学习笔记
- 前端开发:axios在vue中的使用
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- vue、vuex、iview、vue-router报错集锦与爬坑记录
- Vue设置全局的方法和样式
- Vue——slot
- 038:vue+openlayers导出 image 形式地图(示例代码)
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue中Vue.use()的原理及基本使用
- 【vue】如何安装vue 脚手架以及创建脚手架项目_10