vue列表到详情页面的操作

希望我这条可以置顶，因为搜了一下午都搜到的什么玩意儿
这个几行代码，你粘一下就可以用了，字段api啊什么的换一下
需求：
点击“推荐歌单”--进入歌单列表
A.vue

image.png

进入到该页面：
A-detail.vue

image.png

router/index.js

const router = new Router({
  routes: [
...,
{
      path: '/favoriteList/:id',
      name: 'favorite_list',
      component: favorite_list
    }
]
}

A.vue：

//html
  <li class="songs-item-li" @click="gosonglistFn(item)" v-for="(item,k) in songList" v-if="k<6">
              <img :src="item.coverImgUrl" alt="">
              <div class="listen">
                <i class="fa fa-headphones"></i>{{item.songNum}}
              </div>
              <p class="text">{{item.title}}</p>
  </li>

//js
   gosonglistFn(item_){
          this.$router.push({
            name: 'favorite_list',
            params: {
              id:item_.id
            }
          });
        }

或者：

//html
<router-link  :to="`/favoriteList/${item.id}`" :key="item.id" class="around">click</router-link>

A-detail.vue

    beforeRouteEnter (to, from, next) {
//beforeRouteEnter中this无效，所以能用vm
        next(vm => {
          var creator_ = to.params.id;//好的抓到id了
          axios.get('https://api.bzqll.com/music/netease/search?        key=579621905&s='+creator_+'&type=song&limit=20&offset=0').then((res)=>{
            vm.songlikelist = res.data.data;
          });
        })
      },

关于beforeRouteEnter（2.2新增）看如下网址：
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB

嗯这样就可以实现了，以下是我的笔记总结，可以不看。

-----------------------------------------------------忽略的分隔符吼吼吼-----------------------------------------------------------------------------
当http://localhost:8081/#/favoriteList/id中的id变化时，vue默认组件复用，所以尽管id变化，但是不会再触发mounted，created等方法，所以之前搜到的高票置顶的答案无卵用：

image.png

id变化后我是没从created里拿到过，而且大多都是类似于这样的答案，很奇怪，可能我没get到他那个点吧