从零开始实现mini-min网易云音乐(二):router路由跳转和axios获取后端数据

最新推荐文章于 2023-12-02 17:33:38 发布

ysgTO

最新推荐文章于 2023-12-02 17:33:38 发布

阅读量212

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/langko/article/details/125537235

版权

这篇博客详细介绍了在Vue.js项目中如何配置路由以及使用Axios获取后端数据。首先，在app.vue文件中通过<router-view/>实现页面跳转，然后利用<router-link>标签指定点击事件触发的路由。接着，在router/index.js中定义具体的路由路径和对应的组件。最后，通过封装Axios基础路径和请求方法，展示了如何获取并处理轮播图数据。

摘要由CSDN通过智能技术生成

一:router路由跳转

1.app.vue里直接使用<router-view/>组件(不需要import和components)

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

  <Footer/>
  </div>
</template>

2.要设置哪个标签点了就会跳转就设置哪一个:其实就是套一个

<router-link :to="{path:'/itemMusic'}">XXX</router-link>

<router-link :to="{path:'/itemMusic'}">
      <img :src="image.pic" />
</router-link>

3.router/index.js里设置页面路由

const routes = [
  /*{
    path: '/',
    name: 'home',
    component: HomeView
  },*/

  {
    path: '/itemMusic',   //路径
    name: 'itemMusic',    //名字
    component: () => import('../views/itemMusic')    //显示什么组件页面
  }
]

二:axios获取后端数据

分三步走

//封装基础路径,便于上线服务器IP
import axios from 'axios';
let service=axios.create({
    baseURL:"http://localhost:3000/",
    timeout:3000
})

export default service

//逐个封装请求,这里演示的是请求轮播图
import service  from "..";
// 获取首页轮播图的数据
export function getBanner(){
    return service({
        method:"GET",
        url:"/banner?type=2",
    })
}

//在这里使用,前端请求并且拿到数据
import { getBanner } from "@/request/api/home.js";

onMounted(async () => {
      // axios.get('http://localhost:3000/banner?type=2').then((res)=>{
      //   console.log(res);
      //   state.images=res.data.banners
      //   console.log(state.images);
      // })
      let res = await getBanner();
      state.images=res.data.banners
      console.log(res);
    });
    return { state };
  },