Vue中axios及router封装

axios封装

1.创建network

2.config.js的代码：

export const GET='get';
export const POST='post';
export const path={
  list:"/small4/shop/goods/list"
}

3.core.js

import { GET, POST } from "./config"
import axios from "axios";



const instance = axios.create({
  baseURL: "https://api.it120.cc",//发送请求时，会在url前拼接baseUrl
  timeout: 10000
})


export function request(method, url, params) {
  switch (method) {
    case GET:
      return get(url, params)
    case POST:
      return post(url, params)
  }
}

function get(url, params) {
  return instance.get(url, params)
}

function post(url, params) {
  return instance.post(url, params)
}

4.index.js

import {request} from "./core"
import {GET,path} from "./config"

const network = {
  getStoreList(params) {return request(GET,path.list,params)}
}
export default network;

流程：config.js中的 list:"/small4/shop/goods/list"用来对core.jsbaseURL的补全，然后调用函数封装network组件，这个过程params是用来传参的。

indx.js需要在main.js中调用。（下面将要提到的封装router路由也是在main.js调用）

###　封装router

１．config.js

import Home from '../views/Home.vue'

const router = {
  home:{
    path: '/',
    name: 'Home',
    component: Home
  },
  about:{
    path:"/about",
    name:"About",
    component:() => import('../views/About.vue')
  }
}

export default router;

2.homeModule.js

import router from "./config";

const homeMoudule = [
  router.home,
  router.about
]

export default homeMoudule;

3.index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import homeModule from "./homeModule"

Vue.use(VueRouter)
const routes = [
  ...homeModule
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

流程：封装router在main.js中引入的是config.js，可以说流程与axios的相反。

main.js

这是今天学的，先记下来，字写得不好，见谅，哈！