代码改变世界

element组件化跳转和路由式跳转

2019-07-25 16:39  HHFFZ  阅读(2302)  评论(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>Document</title>
    <link rel="stylesheet" href="C:\text\element.css">
</head>

<body>
 <script src="C:\text\vue.js"></script>
 <script src="C:\text\vue-router.js"></script>
 <script src="C:\text\element.js"></script>
   <script src="C:\text\require.js"></script> 
   <div id="app">
        <!-- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            添加组件式内容更新
                <el-radio-button label="top">top</el-radio-button>
                <el-radio-button label="right">right</el-radio-button>
                <el-radio-button label="bottom">bottom</el-radio-button>
                <el-radio-button label="left">left</el-radio-button>
           </el-radio-group>
            
              <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="用户管理"><user></user></el-tab-pane>
                <el-tab-pane label="配置管理"><user></user></el-tab-pane>
                <el-tab-pane label="角色管理"><user></user></el-tab-pane>
                <el-tab-pane label="定时任务补偿"><user></user></el-tab-pane>
              </el-tabs>   -->
      
              <!-- 路由式组件跳转 -->
       <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/shouye' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/huodong' }">活动管理</el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    <router-view></router-view>
        </el-breadcrumb>
                  
    </div>
    <!-- <template id="laber">
            <div > 
             <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
               <el-radio-button label="top">top</el-radio-button>
               <el-radio-button label="right">right</el-radio-button>
               <el-radio-button label="bottom">bottom</el-radio-button>
               <el-radio-button label="left">left</el-radio-button>
             </el-radio-group>
           
             <el-tabs :tab-position="tabPosition" style="height: 200px;">
               <el-tab-pane label="用户管理"><uesr></uesr></el-tab-pane>
               <el-tab-pane label="配置管理">配置管理</el-tab-pane>
               <el-tab-pane label="角色管理">角色管理</el-tab-pane>
               <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
             </el-tabs>
         </div>
    </template> -->
           
    <template id='table'>
                <el-table
                  :data="tableData"
                  style="width: 100%">
                  <el-table-column
                    prop="date"
                    label="日期"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="地址">
                  </el-table-column>
                </el-table>
         </template>
  
  <script>
        Vue.component('user',{
            template:"#table",
            data(){
            return{
             tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
                }
            }
        })
          
        var Login={
            template:"<h1>这句话卡就</h1>"
        }
        var system={
            template:"<h1>就卡过的</h1>"
        }
        var userManage={
            template:"<h1>喝酒撒个</h1>"
        }
        var routerObj= new VueRouter({
            routes: [
             {path:'/shouye',component:Login},
             {path:'/huodong',component:system}
            ]

        })
            var vm=  new Vue({
                    el: '#app',
                    data: {
                        tabPosition:'top'
                    },
                    methods: {
                        handleOpen(key, keyPath) {
                            console.log(key, keyPath);
                        },
                        handleClose(key, keyPath) {
                            console.log(key, keyPath);
                        }
                     },
                     router:routerObj,



                     })
          </script>      

</body>
</html>