经典的三列布局渲染如下：

三列布局

将布局的每个块定义为一个组件

模板id=' header ' div class=' header BG-primary text-center ' H3 header区域/H3/div/template template id=' left ' div class=' left BG-danger col-LG-2 ' H3侧栏区域/H3/div/模板id=' main ' div class=' main BG-infocol-LG-10 ' H3主体区域/H3/div/template使用路由器视图显示相应的组件

Div id=' app '路由器-视图名称=' header '/路由器-视图路由器-视图名称=' left '/路由器-视图路由器-视图名称=' main '/路由器-视图/div定义路由规则

let router=new VueRouter({ routes :[{ path : '/'，components 3360 { ' header ' : header，' left': left，' main ' : main } } } })；绝对代码

摘要

以上是边肖介绍的vue.js通过路由实现经典三列布局的示例代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！