vue-router学习例子分享
2024-09-07 15:13:37
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>
最新文章
- 使用Apache Server 的ab进行web请求压力测试
- 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 &#39;OrderList&#39; 中的标识列插入显式值
- dubbo-monitor图标功能不显示
- asp.net mvc 在View中获取Url参数的值
- 把验证码和生成时间负值给$_SESSION[vCode]生成图像给浏览器
- CMMI集谈
- 在Windows Azure上搭建SSTP VPN
- Spring MVC的UrlBasedViewResolver和InternalResourceViewResolver
- 转:使用XHProf优化PHP程序
- 关于oledb对Excel的读取
- android 再按一次退出程序(实现代码)
- 搭建MyBatis框架
- Python - Python2与Python3合理共存Windows平台
- C# set get 函数 属性访问器
- [51nod1357]密码锁
- React Native 0.50版本新功能简介
- Mapnik 3.0.20编译安装
- hotplug 热拔插机制框架
- 【ARC082D】Sandglass
- Dubbo -- 系统学习 笔记 -- 示例 -- 只注册
热门文章
- Python学习————列表的增删改查
- CSS 子元素选择器
- UVA 12003 Array Transformer
- 【Struts2学习笔记(12)】Struts2国际化
- hdoj--5567--sequence1(水题)
- jquery的append/prepend和after/before有什么区别呢?
- input元素和display:inline-block的元素不在一行的解决办法
- T-SQL函数类型——系统函数
- GoldenGate V11.1数据复制限制
- 瞎折腾-CentOS 7.4 编译4.16.2版kernel 并安装