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.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
javascript实现拼图游戏
Jan 29 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
layui动态加载多表头的实例
2019/09/05 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python之import机制详解
2014/07/03 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
幼儿教师工作感言
2014/02/14 职场文书
《乡愁》教学反思
2014/02/18 职场文书
青春寄语大全
2014/04/09 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
入门学习Go的基本语法
2021/07/07 Golang
MySQL分区路径子分区再分区
2022/04/13 MySQL