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 相关文章推荐
js的写法基础分析
Jan 17 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python关闭占用端口方式
2019/12/17 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python定义函数实现累计求和操作
2020/05/03 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
入学证明
2015/06/23 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers