vue模板1——list detail

本文主要是介绍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}]
})

这篇关于vue模板1——list detail的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---