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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
ExtJs整合Echarts的示例代码
Feb 27 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
解决vuex刷新数据消失问题
Nov 12 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
星际争霸秘籍
2020/03/04 星际争霸
FCKeditor添加自定义按钮
2008/03/27 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
详解ES6中的let命令
2020/04/05 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
python中__call__方法示例分析
2014/10/11 Python
python验证码识别的示例代码
2017/09/21 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python两个list[]相加的实现方法
2020/09/23 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
入党积极分子思想汇报
2014/01/02 职场文书
九年级体育教学反思
2014/01/23 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
css3 文字断裂效果
2022/04/22 HTML / CSS