vue.js通过路由实现经典的三栏布局实例代码


Posted in Javascript onJuly 08, 2018

经典的三栏布局效果图如下:

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通过路由实现经典的三栏布局实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
JS回调函数深入理解
Oct 16 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 #jQuery
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 #Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 #Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 #Javascript
react-native动态切换tab组件的方法
Jul 07 #Javascript
vue.js 实现点击展开收起动画效果
Jul 07 #Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
php遍历目录viewDir函数
2009/12/15 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
js 省地市级联选择
2010/02/07 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
vuejs如何配置less
2017/04/25 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python3实现读取chrome浏览器cookie
2016/06/19 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
室内设计专业个人的自我评价
2013/12/18 职场文书
甜品店创业计划书
2014/08/14 职场文书
党校学习心得体会范文
2014/09/09 职场文书
自荐信怎么写
2015/03/04 职场文书
硕士学位申请报告
2015/05/15 职场文书
河童之夏观后感
2015/06/11 职场文书
诚信考试主题班会
2015/08/17 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis