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闭包 实例分析
Dec 25 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
详解Python中的Cookie模块使用
2015/07/06 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
保密工作责任书
2014/04/16 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
经营理念口号
2014/06/21 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
大学运动会通讯稿
2015/07/18 职场文书
远程教育学习心得体会
2016/01/23 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis