vue.js通过路由实现经典的三栏布局实例代码
更新时间：2018年07月08日 09:47:37 作者：章鱼喵_
本文通过实例代码给大家介绍了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通过路由实现经典的三栏布局实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要介绍了Vue SPA 首屏优化方案的的相关资料，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了vue动态添加的路由页面刷新时失效的原因及解决方案，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了vue中v-model动态生成的实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了axios携带cookie配置详解(axios+koa)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家介绍了Vue3.0组件通信mitt源码ts实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了在浏览器console中如何调用vue内部方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
在Vue3中可以使用ref函数来创建一个响应式的变量,通过将ref函数应用于一个组件实例,我们可以获取到该组件的实例对象,这篇文章主要给大家介绍了关于vue3 ref获取组件实例的详细图文教程,需要的朋友可以参考下2023-10-10
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了在vue项目中引用Antv G2,以饼图为例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue cli3.x打包后如何修改生成的静态资源的目录和路径
这篇文章主要介绍了vue cli3.x打包后如何修改生成的静态资源的目录和路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论