Vue2移动端项目总结（配置2级路由，封装网络请求等）

第一个项目终于完结撒花，虽然只是跟着视频敲的，但也让我学到不少的知识。我在此总结一下，以防以后不时之需。若有大佬发现本文有错误的地方，还望留言指正。

配置2级路由

1.在router文件夹下的index.js中导入所需要的组件。
2.在下方配置路由和组件的对应关系。
3.在留有的组件关系下，与path,component同级创 建children，并在里面写上2级组件的对应关系。

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: "/layout"
  },
  {
    path: "/layout", component: Layout,
    children: [
      { path: "school", component: School },
      { path: "subject", component: Subject },
      { path: "home", component: Home, }
    ]
  }
]

注意：这里并没有完，以上代码为例。若直接运行，并不会显示Layout的子组件，此时首页的地址是/layout。要想自动显示出来就需要重定向，使首页地址是/layout/school。
4.重定向，在component: Layout,后面加上 redirect: “/layout/school”。

封装网络请求

封装是每个成熟程序员都行掌握的技能，我初次接触感觉挺麻烦的，但也硬着头皮敲出来了。
1.创建utils文件，在下面调用axios操作ajax创建连接函数。baswURL是接口地址。

//网络请求
import axios from "axios";
const ajax = axios.create({
  baseURL: "http://localhost:3000"
}
)

export default ajax;

2.封装要发起的请求，创建一个和你页面名称一样的js文件，导入网络请求接口。url是接口地址，而且这里展示的好像是GET请求的代码，POST的好像不一样，这里只是说一下流程。

//封装要发起的请求
import request from '@/utils/request'

export const recommendMusic = params => request({
  url: "/personalized",
  params
})

3.创建一个统一的出口，在index.js文件下。这里很简单，就是将刚才请求倒入再导出。

import { recommendMusic } from "./home";
export const recommendMusicAPI = recommendMusic

4.最后在需要请求的页面导入，调用即可。

<script>
import { recommendMusicAPI } from "@/api";
export default {
  data() {
    return {
      recommendList: [],
    };
  },
  async created() {
    const res = await recommendMusicAPI({ limit: 6 });
    console.log(res);
  },
};
</script>

组件调用

其实组件调用很简单（我感觉是），就是新建个.vue文件将样式放进去（比如：一个div样式，一个Tab样式等），在需要的页面里导入那个.vue文件，创建一个同文件名的标签。例如：

<SongItem
      v-for="obj in hotList"
      :key="obj.id"
      :name="obj.name"
      :author="obj.song.artists[0].name"
      :id="obj.id"
    ></SongItem>

我重点记录一下如何传参，不过我目前只会页面向组件传参，父向子好像需要自定义参数或者Vuex，具体去看笔记。
组件接受参数通过props
上面代码中想组件传了name,author,id三个参数，在组件中用props接受。

<script>
export default {
  props: {
    name: String,
    author: String,
    id: Number,
  },
};
</script>