vue-router学习例子分享
2017-02-23 15:30
489 查看
http://blog.csdn.net/bboyjoe/article/details/52804988
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <script src="lib/boot.js"></script> <style> .el-submenu .el-menu-item a{ color:#fff; display:block; } .el-menu-item.is-active a{ color: #20a0ff; } </style> </head> <body> <div id="app"> <el-row class="tac"> <el-col :span="8"> <el-menu default-active="2" class="el-menu-vertical-demo" theme="dark"> <el-submenu index="1"> <template slot="title">导航一</template> <el-menu-item-group title=""> <el-menu-item index="1-1"><router-link to="/user">选项一</router-link></el-menu-item> <el-menu-item index="1-2"><router-link to="/info">选项二</router-link></el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title">导航二</template> <el-menu-item-group title=""> <el-menu-item index="2-1"><router-link to="/test01">测试1</router-link></el-menu-item> <el-menu-item index="2-2"><router-link to="/text02">测试2</router-link></el-menu-item> </el-menu-item-group> </el-submenu> <el-menu-item index="3">导航三</el-menu-item> </el-menu> </el-col> <el-col :span ="16" style="min-height:400px;"> <router-view></router-view> </el-col> </el-row> </div> <!-- 用户列表 --> <template id="user"> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="操作"> <template scope="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> <!-- :to="'/userDetail/'+scope.$index" --> <router-link :to="{ name: 'userDetail', params: { id: scope.$index }}"><el-button size="small" >查看详情</el-button></router-link> </template> </el-table> <router-view></router-view> </div> </template> <!-- 用户详情 --> <template id="userDetail"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间"> <el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> </el-col> </el-form-item> <el-form-item label="即时配送"> <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质"> <el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源"> <el-radio-group v-model="form.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式"> <el-input type="textarea" v-model="form.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <router-link to="/user"><el-button>取消({{$route.params.id}})</el-button></router-link> </el-form-item> </el-form> </template> <script> // 用户列表 var user = { template:'#user', 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 弄' }] } }, methods:{ handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } } } var userDetail = { template:'#userDetail', data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log('submit!'); } }, mounted(){ // if(this.$route.params){ // console.log(this.$route.params.id); // } } } var info = { template:'<div>info</div>' } var text01 = { template:'<div>text01</div>' } var text02 = { template:'<div>text02</div>' } var routes = [ {path:'/user',name:'user',component:user}, {path:'/userDetail/:id',name:'userDetail',component:userDetail}, {path:'/info',name:'info',component:info}, {path:'/test01',name:'test01',component:text01}, {path:'/text02',name:'text02',component:text02} ] var router = new VueRouter({ routes:routes }) new Vue({ router:router, watch:{ '$route'(to,from){ console.log(to.params.id); } } }).$mount('#app'); router.push({path:'/user'}); </script> </body> </html>
相关文章推荐
- mjson学习的简单例子分享
- vue-router学习思维导图
- Vue学习之路---No.2(分享心得,欢迎批评指正)
- Vue学习之路---No.5(分享心得,欢迎批评指正)
- Vue学习之路---No.4(分享心得,欢迎批评指正)
- android实现联网小例子,刚学习与大家分享
- Vue学习之路---No.2(分享心得,欢迎批评指正)
- vue+vue-cli+vuex+vrouter 开发学习和总结
- Vue.js学习之vue-router vuex axios webpack
- Vue学习之路---No.2(分享心得,欢迎批评指正)
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
- vuejs学习——vue+vuex+vue-router项目搭建(二)
- Vue.js第二天学习笔记(vue-router)
- vue-router 学习快速入门
- vue学习笔记---tap切换配置(vue-router)
- C# 串口操作系列(1) -- 入门篇,一个标准的,简陋的串口例子。 ——兔子党逍遥原创,转来分享学习
- vuejs学习——vue+vuex+vue-router项目搭建(一)
- vuejs学习——vue+vuex+vue-router项目搭建(三)
- Vue学习之路---No.2(分享心得,欢迎批评指正)
- Vue学习之路---No.3(分享心得,欢迎批评指正)