<!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: extelement.css"> </head> <body> <script src="C: extvue.js"></script> <script src="C: extvue-router.js"></script> <script src="C: extelement.js"></script> <script src="C: ext equire.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=" 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>