利用vue3 调用api接口实现 数据的渲染 以及详情的实现

首先新建一个项目

yarn create vite vue3-template --template vue

然后下载相应的api

npm i axios router

首先配置
App.vue

<script setup>

</script>

<template>
  <router-view></router-view>
</template>

<style>

</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

封装axios src/utils/request.js

import axios from 'axios'
const instance = axios.create({
    baseURL:"https://cnodejs.org/api/v1"
})
export default instance

在src/api/topics.js 中请求

import axios from '../utils/request';

//请求列表的函数
export const getTopics = (params) => axios("/topics",{params})

//根据id获取详情
export const getTopic = (id,params) => axios.get(`/topic/${id}`,{params})

新建hooks src/componsables/useTopics.js

import { ref,onMounted } from 'vue'
import { getTopics } from '../api/topics'
export default function useTopics(){

    /**
 * 数据渲染功能
 */
//声明 数据
const topics = ref([])

//请求数据
onMounted(async () => {
    const res =await getTopics()
    topics.value = res.data.data
})
return {
    topics
}

}

新建hooks src/componsables/useTopic.js

import { useRouter } from 'vue-router'
export default function useTopics(){
  //跳转
const router = useRouter()
const go = (id) =>{
    router.push("/detail?id=" + id)
}
return {
    go
}
}

在 src 下 新建 /views/Index.vue

<template>
  <div>
      <ul>
          <li v-for="topic in topics" :key="topic.id" @click="go(topic.id)">
           {{topic.title}}
          </li>
      </ul>
  </div>
</template>

<script setup>
// import { onMounted,ref} from 'vue';
// import { getTopics } from '../api/topics'
// import { useRouter } from 'vue-router'
// /**
//  * 数据渲染功能
//  */
// //声明 数据
// const topics = ref([])

// //请求数据
// onMounted(async () => {
//     const res =await getTopics()
//     topics.value = res.data.data
// })

//数据渲染
import useTopics from '../componsables/useTopics'
const { topics } = useTopics();

//跳转
// const router = useRouter()
// const go = (id) =>{
//     router.push("/detail?id=" + id)
// }

//跳转
import useTopic from '../componsables/useTopic'
const { go } = useTopic();
</script>

<style>

</style>

在 src 下 新建 /views/Detail.vue

<template>
   <div>
     {{topic.title}}
     
     <!-- ？表示如果后续的属性不存在了 就不获取了 -->
     {{topic.author?.loginname}}

     {{topic.create_at}}
   </div>
</template>

<script setup>
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { getTopic } from '../api/topics';
 
 let topic = ref({})

 const route = useRoute()

 //获取id
 const { id } = route.query

 //拿着id进行数据的请求
 onMounted( async () => {
     const res = await getTopic(id)
     topic.value = res.data.data
 })

</script>

<style>

</style>

在src 下 新建 router/index.js

import { createWebHashHistory ,createRouter} from "vue-router"

import Index from '../views/Index.vue'
const routes = [
     {
         path:'/',
         component:Index
     },
     {
         path:'/detail',
         component:()=> import('../views/Detail.vue')
     },
     {
         path:"/store",
         component:()=> import('../views/Store.vue')
     }


]
 const router = createRouter({
    history:createWebHashHistory(),
    routes
})
export default router

即可实现数据的渲染以及跳转功能