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.ajax 用户登录验证代码
Oct 29 Javascript
浅谈js中的闭包
Mar 16 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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 三维饼图的实现代码
2008/09/28 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python字符串,数值计算
2016/10/05 Python
谈谈Python中的while循环语句
2019/03/10 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python @property使用方法解析
2019/09/17 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
我读书我快乐演讲稿
2014/05/07 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
个人工作决心书
2015/09/22 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电