6.动态路由router-link传值

接收this.$store.params下面

一.页面跳转

<template>
    <div>
     个人中心
     <router-link to="/detail" tag="button">    //tag:可以更改标签类型
     跳转到detail
     </router-link>
    </div>
</template>
<script>
    export default {
        name:"Center"
    }
</script>
<style  scoped>
</style>

二.router-link动态传值

从center跳转到detail

//1.center.vue--加id跳转
<template>
    <div>
     个人中心
     <router-link to="/detail/3232387" tag="button">    //detail后面跟的有id
     跳转到detail
     </router-link>
    </div>
</template>
<script>
    export default {
        name:"Center"
    }
</script>
<style  scoped>
</style>
//2.router/index.js--配置
const routes = [
 ...
  {
    path: '/detail/:id',      //配置
    name: 'detail',
    component: () => import('@/views/Detail.vue')
  },
]
//3.detail.vue--使用
<template>
    <div>
        详情页
    </div>
</template>
<script>
    export default {
        name:"Detail",
        mounted(){
            console.log(this.$route.params)   //接收
            var id=this.$route.params.id;
        }
    }
</script>

三.传变量

<router-link tag="p" :to="'/detail/'+item.id" v-for="item of playlists" :key="item.id" class="box"> 
   <p>{{item.name}}</p>
</router-link>

在detail.vue中通过传递过来的id发送请求

<template>
    <div>
        详情页
        <img :src="imgUrl" alt="">
    </div>
</template>
<script>
    export default {
        name:"Detail",
        data(){
            return{
                imgUrl:""
            }
        },
        mounted(){
            var id=this.$route.params.id;
            var url=`http://192.168.14.49:5000/playlist/detail?id=${id}`;
            this.axios.get(url).then(res=>{
               this.imgUrl=res.data.playlist.creator.avatarUrl;
            })
        },
        activated(){
        },
    }
</script>
<style scoped>
</style>
//App.vue
<keep-alive exclude="Detail">  
   <router-view/>
</keep-alive>
//路由页面router/index.js--配置
const routes = [
 ...
  {
    path: '/detail/:id',      //配置
    name: 'detail',
    component: () => import('@/views/Detail.vue')
  },
]

*使用子组件跳转和父组件跳转是一样的

 //components/Top.vue
<router-link :to="'/detail/'+data.id">
   <div class="list">
     <img :src="data.images.small" alt="" />
     <p>{{ data.title }}</p>
   </div>
</router-link>
//views/Detail.vue
 mounted(){
      var id=this.$route.params.id;
      this.axios.get("v2/movie/subject/"+id).then(res=>{
         this.url=res.data.images.small;
         this.summary=res.data.summary;
      })
    }