代码改变世界

vue路由and组件操作

2019-07-25 09:00  HHFFZ  阅读(260)  评论(0)    收藏  举报 
<!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' 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>