vue模板1——list detail

List.vue

<template>
	<div>
		<h1>列表页</h1>
		<ul>
			<li v-for="(tmp,index) in list">
				<button :myData='tmp' @click="jump(index)">{{tmp}}</button>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data:function(){
			return {list:[100,200,300]}
		},
		methods:{
			jump(myIndex){
				this.$router.push('/myDetail/'+myIndex);
			}
		}
	}
</script>

<style>
	ul{
		color:#FF0000;
		list-style:none;
	}
</style>

Detail.vue

<template>
	<div>
		<h1>详情页{{myId}}</h1>
		<button @click="back">返回</button>
	</div>
</template>

<script>
	export default{
		data:function(){
			return {myId:''}
		},
		created:function(){
			this.myId=this.$route.params.id;
		},
		methods:{
			back(){
				this.$router.go(-1);
			}
		}
	}
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Test from '@/components/Test'  //别少了/
import List from '@/components/List'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: List
    },
    {
    	path:'/myList',
    	component:List
    },
    {
    	path:'/myDetail/:id',
    	component:Detail
    }
  ]
})