<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> html, body, h1 { margin: 0%; padding: 0%; } .header { height: 100px; background-color: aqua } .left { flex: 2; background-color: chartreuse; height: 600px; } .main { flex: 80%; background-color: gold; height: 600px; } .container { display: flex; height: 600px; } </style> </head> <body> <div id="app"> <!-- 5. 占位符--> <router-view></router-view> <div class="container"> <router-view name='left'></router-view> <router-view name='main'></router-view> </div> </div> </body> <!--1、导入vue包--> <script src="./js/vue.min.js"></script> <!--1、导入router包--> <script src="./js/vue-router.js"></script> <!--1、创建vue实例（new对象）--> <script type="text/javascript"> // 2.创建组件，以及对应的模板 var header={ template:'<h1 class="header">头部组件</h1>' } var left={ template:'<h1 class="left">侧边栏组件</h1>' } var main={ template:'<h1 class="main">main主题组件</h1>' } // 3.创建路由，用于管理组件，定义了路由规则 var router=new VueRouter({ routes:[ // {path:'/',component:header}, // {path:'/left',component:left}, // {path:'/main',component:main}, { path:'/',components:{ 'default':header, 'left':left, 'main':main } } ], }) var vm = new Vue({ el:'#app', data:{}, methods:{}, // 4.将router注册到vue中 router:router }) </script> </html>
