编程式路由及接口的封装与引入渲染抛出

编程式路由

怎么实现点击哪个跳转到哪个页面？

除了使用 <router-link> 来创建 a 标签来定义导航链接，通过设置不同的id跳转到指定页面，我们还可以借助 router 的实例方法，通过编写代码来实现。

动态路由的传参

{path:'/listview',query:{id:item.id}}"

<router-link :to="{path:'/listview',query:{id:item.id}}" class="swiper-slide" v-for="(item,i) in musics.musicList" :key="i">

在 listview 组建中接收

异步函数

//ajax是异步函数(网络请求花费时间，然而代码不等待直接往下执行 ) // async(声明一个异步函数) 与 await(等待结果) 是一组结构

 

1.用setup（）方法获取当前地址栏里的id，

const route = useRoute(); //当前组件的路由信息对象

 export default {
        name: "listView",
        setup() {
            const route = useRoute();
            //当前组件的路由信息对象
            //ajax是异步函数(网络请求花费时间，然而代码不等待直接往下执行 )
            // async(声明一个异步函数)    await(等待结果)  是一组结构
​
            onMounted(//view与model绑定
                async () =>{
                    let id = route.query.id;
                    console.log(id);
                    let res=await getPlaylistDetail(id);
                    console.log(res);
                })
        }
    }

2.引用

 import {useRoute} from 'vue-router'

怎么实现点击哪个跳转到到对应的歌单列表并获取到指定页面的内容？

思路：1.打开网易云 找到歌单列表的接口

2.src的api/index.js 封装接口

//获取歌单详情的api  /playlist/detail?id=24381616  id:当前歌单的详情
​
export function getPlaylistDetail(id) {
    return axios.get(`${baseUrl}/playlist/detail?id=${id}`)
}

3.在listView.vue中

 import {getPlaylistDetail} from '@/api/index.js'

4.渲染与抛出

---

返回上一页设置：@click="$router.go(-1)"