routing and assembly operations vue

<!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:\text\vue.js"></script>
    <script src="C:\text\vue-router.js"></script>
    <script src="C:\text\element.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'Food four>= '/ food4'to</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 of> Apple </ h1 of> " 
             } 
             var FOOD2 = { 
                 Template: " <h1 of> banana </ h1 of> " 
             } 
             var food3 = { 
                 Template: " <h1 of> dragon </ h1 of> "
             } 
             Was food4 = { 
                 a template: " <h1 of> grape </ h1 of> " 
             } 
             var food5 = { 
                 Template: " <h1 of> Watermelon </ h1 of> " 
             } 
             var food6 = { 
                 Template: " <h1 of> Orange </ h1 of> " 
             } 
            var routerObj = new new VueRouter ({ 
                routes: 
                [ 
                    {path: ' / ' , // original routing components page 
                    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>
routing and assembly operations vue

Guess you like
