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组件 别人提供 ...
随机推荐
- [LeetCode] 122. 买卖股票的最佳时机ii best-time-to-buy-and-sell-stock-ii(贪心算法)
思路: 只要第二天的价格高于第一天,就进行交易.(这样的话就默认可以同一天内先卖出再买进) class Solution(object): def maxProfit(self, prices): & ...
- 紫书 习题 8-13 UVa 10570 （枚举+贪心）
我看到数据范围只有500, 第一反应枚举所有的可能,然后求出每种可能的最小次数. 但是不知道怎么求最小次数.我想的是尽量让一次交换可以让两个不在应该在的位置的数字 到原来应该在的位置的数字, 这样可以 ...
- HDU——T 1507 Uncle Tom's Inherited Land*
http://acm.hdu.edu.cn/showproblem.php?pid=1507 Time Limit: 2000/1000 MS (Java/Others) Memory Limi ...
- POJ 2442 Sequence(堆的使用练习）
题目地址:id=2442">POJ 2442 真心没想到这题的思路. .原来是从第一行逐步向下加,每次都仅仅保存前n小的数.顺便练习了下堆.. 只是感觉堆的这样的使用方法用的不太多啊. ...
- zzulioj--1775-- 和尚特烦恼1——是不是素数(素数水题)
1775: 和尚特烦恼1--是不是素数 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 563 Solved: 193 SubmitStatusWeb ...
- 28.STL常用算法
#include <algorithm> 算法 常用版本 描述 返回Type std::find() find(_InIt _Fisrt,_InIt _Last, _Ty& _Va ...
- 安卓开发--AsyncTask
package com.cnn.asynctask; import android.app.Activity; import android.content.Intent; import androi ...
- Android属性动画-Interpolator和ViewPropertyAnimator的用法
Interpolator的用法 Interpolator这个东西很难进行翻译,直译过来的话是补间器的意思,它的主要作用是可以控制动画的变化速率,比如去实现一种非线性运动的动画效果.那么什么叫做非线性运 ...
- ipad mini2 升级9.0.2后解锁白屏解决
解锁白屏是个什么现象?就是当你用手指滑动解锁后出现输入密码的界面后,1秒之内屏幕变白,中间一个黑色的苹果,几秒之后重新回到滑动解锁的界面.我出现这个现象不是因为升级了9.0.2,而是升级了9.0.2之 ...
- 将毫秒时间转换为yyyy-MM-dd HH:mm:ss格式
/** * 将毫秒时间转换为yyyy-MM-dd HH:mm:ss格式 */ public static String getDateFromTimeMillis(Long timeMillis) { ...