vue路由—实现经典布局教程

vue路由—实现经典布局（同一个路由，对应多个组件）

1.router-view头部，侧边栏，主体内容区域三个区域，每个有一个占位符。

2.占位符定义一个name属性，跟components的第一个属性对应，这里component使用复数，同一个路由下匹配多个组件。

html代码：

<script> var header = { template: '

head头部区域

' }; var leftnav = { template: '

left侧边栏

' }; var maincontent = { template: '

main主体内容

' }; var router = new vuerouter({ routes:[ {path:'/', components:{ default:header, 'left':leftnav, 'main':maincontent }} //这里使用复数components，第一个属性与router-view中的name对应，第二个是表示要展示的组件名字 ] }); var vm = new vue({ el:'#app', router }); </script>

效果：