vue.js通过路由实现经典的三栏布局实例代码
更新时间:2018年07月08日 09:47:37 作者:章鱼喵_
本文通过实例代码给大家介绍了vue.js通过路由实现经典的三栏布局,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
经典的三栏布局效果图如下:
三栏布局
•将布局的各个区块定义成组件
<template id="header"> <div class="header bg-primary text-center"> <h3>头部区域</h3> </div> </template> <template id="left"> <div class="left bg-danger col-lg-2"> <h3>侧边栏区域</h3> </div> </template> <template id="main"> <div class="main bg-info col-lg-10"> <h3>主体区域</h3> </div> </template>
•用router-view显示相应的组件
<div id="app"> <router-view name="header"></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> </div>
•定义路由规则
let router = new VueRouter({ routes: [ { path: '/', components: { 'header': header, 'left': left, 'main': main } } ] });
总结
以上所述是小编给大家介绍的vue.js通过路由实现经典的三栏布局实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关文章
vue修改this.$confirm的文字样式、自定义样式代码实例
this.$confirm是一个 Vue.js 中的弹窗组件,其样式可以通过 CSS 进行自定义,下面这篇文章主要给大家介绍了关于vue修改this.$confirm的文字样式、自定义样式的相关资料,需要的朋友可以参考下2024-02-02vue3+vite+axios 配置连接后端调用接口的实现方法
这篇文章主要介绍了vue3+vite+axios 配置连接后端调用接口的实现方法,在vite.config.ts文件中添加配置,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2022-12-12一款移动优先的Solid.js路由solid router stack使用详解
这篇文章主要为大家介绍了一款移动优先的Solid.js路由solid router stack使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08electron-vue 项目添加启动loading动画的实现思路
electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue 中加载的页面,体验性很差,本文给大家介绍electron vue启动动画效果的实例代码,感兴趣的朋友一起看看吧2022-01-01对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08vue el-table中使用el-select选中后无效的解决
这篇文章主要介绍了vue el-table中使用el-select选中后无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08
最新评论