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 相关文章推荐
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
Node.js实现文件上传
2016/07/05 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python3编码问题汇总
2016/09/06 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
写给女朋友的道歉信
2014/01/12 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
销售开票员岗位职责
2015/04/15 职场文书
解析Java异步之call future
2021/06/14 Java/Android
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技