vue-router学习例子分享
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>
vue-router学习例子分享的更多相关文章
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- vue:vue router学习小结
序:本篇内容主要侧重对前端路由的理解,以vue的官方路由作为载体,进行一个简单介绍. 一.路由历史: 最早开始的时候,项目开发使用的是SSR,即服务端渲染.这个时候刷新页面,服务器返回的是全部的htm ...
- 【VUE】VUE相关学习和知识备份
一.学习资料参考 1.1.Vue.js 官网:Vue.js https://cn.vuejs.org/ 官方文档:介绍 - Vue.js https://cn.vuejs.org/v2/guide/ ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue视频学习笔记
video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...
随机推荐
- Codeforces 558E 线段树处理字符串内排序
给出长度为n的字符串,m个操作. 每一个操作有三个值 l,r,op. op==1,表示将字符串中[ l ,r ]的部分依照升序排列. op==0,表示将字符串中[ l ,r ]的部分依照降序排列. 输 ...
- Trustie站点代码托管使用指南
"中国人的github"猛击Trustie官网,開始代码托管... 1. 新建项目 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- A. Ilya and Diplomas( Codeforces Round #311 (Div. 2) )
A. Ilya and Diplomas time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Thinkphp 无法使用->order() 排序的两种解决的方法!
使用ThinkPHP,却发现无法使用->order($order)来排序. $order = " info.date2 desc "; 非常遗憾的是这样写结果order却变成 ...
- vs2012碰到生成时报该错误:项目中不存在目标 “XXXXXX”
vs2012碰到生成时报该错误:项目中不存在目标 "XXXXXX" 首先打开project文件,找到 以下信息: <Import Project="$(MSBuil ...
- UITextField限制输入长度
首先,汉字的输入时的联想词在输入到TextFiled时,并不会走 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersIn ...
- 2.IntelliJ IDEA 2017创建JavaEE项目
转自:https://blog.csdn.net/qq_31628285/article/details/75139909?utm_source=blogxgwz0 IntelliJ IDEA 201 ...
- atom玩法
1.先用 git 下载一个 react-devtools: $ cd /some-directory$ git clone --recursive https://github.com/faceboo ...
- Bayes++ Library入门学习之熟悉class-Importance_resampler
接下来,需要介绍的是重要性重采样类Bayesian_filter::Improtance_resampler.该类实现了两种重采样方法[1][2],和其子类的继承关系图如下: 其中Standard_r ...
- sql排名函数--四个
1 row_number 2 rank 3 dense_rank 4 ntile 例子如下: select * into #MyTablefrom(select '语文' as 课程,70 as 成绩 ...