vue传参

<template>
   <ul>
       <li v-for="item in list" :key="item.id">
           <button @click="goDetail(item.id)">
                {{item.name}}
            </button> 
       </li>
   </ul>
</template>
<script>
    export default {
        data(){
            return{
                list:[]
            }
        },
        created(){
            this.getData(this.$route.params.type); //$route 才有params 动态路由。
        },
        methods:{
            goDetail(id){
                this.$router.push({name:'detail',params:{id:id}})  //哪里需要detail页面哪里就可以 $router的才能push detail。
            },
            getData(type){
                this.$http.get('http://localhost:3000/'+type).then((res)=>{
                    this.list = res.data;
                }) 
            }
        },
        watch:{
            $route(new，old){
                this.getData(new.params.type); //所有再实例上挂载的属性都可以进行监听
            }
        }
    }
</script>

 

转载于:https://www.cnblogs.com/l8l8/p/9391982.html