<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>测试</title> <link rel="stylesheet" href="sass/element.css"> <script src="C: extvue.js"></script> <script src="C: extvue-router.js"></script> <script src="C: extelement.js"></script> <style> *{ list-style: none; margin: 0; padding: 0; } .header{ height: 50px; background-color: blueviolet; text-align: center; font-size: 30px; } .left{ float: left; width: 600px; height: 1000px; background-color: aqua; text-align: center; } .table{ width: auto; height: 1000px; background-color: chocolate; } .foodbox{ float: left; width: 6oopx; height: 1000px; } .food{ display: inline-block; width: 80px; height: 20px; text-align: center; border-radius: 20%; background-color: brown; margin-right:5 px; } </style> </head> <body class="main"> <div id="demo-2" class="demo"> <router-view></router-view> <router-view name="left"></router-view> <router-view name='table'></router-view> </div> <template id='left'> <div class='left'> <router-link class ='food' to='/food1'>食物一</router-link> <router-link class ='food' to='/food2'>食物二</router-link> <router-link class ='food' to='/food3'>食物三</router-link> <router-link class ='food' to='/food4'>食物四</router-link> <router-link class ='food' to='/food5'>食物五</router-link> <router-link class ='food' to='/food6'>食物六</router-link> <router-view></router-view> </div> </template> <template id="table"> <div class='table' > <table> <tbody > <tr>{{1}}</tr> <tr>{{this.$parent.mes}}</tr> </tbody> </table> </div> </template> <script> var header={ template:"<div class='header'>这是一个头部</div>" } var lefter={ template: "#left" } var tabler={ template:"#table" } var food1={ template:"<h1>苹果</h1>" } var food2={ template:"<h1>香蕉</h1>" } var food3={ template:"<h1>火龙果</h1>" } var food4={ template:"<h1>葡萄</h1>" } var food5={ template:"<h1>西瓜</h1>" } var food6={ template:"<h1>橘子</h1>" } var routerObj =new VueRouter({ routes: [ {path:'/',//原始路由组件页面 components: { default: header, left :lefter, table:tabler }, children:[//孩子路由 { path:'food1',component:food1}, { path:'food2',component:food2}, {path:'food3',component:food3}, { path:'food4',component:food4}, { path:'food5',component:food5}, { path:'food6',component:food6}, ] } ] }) var vm= new Vue({ el: '#demo-2', data: { mes:"zhanghui", items: [ { message: 'Foo',age:'18'}, { message: 'Bar', age:'20'}, ] }, components: { }, router:routerObj }) </script> </body> </html>