路由懒加载以 及 axios进阶用法

1. 什么是路由懒加载

当我们打开页面时,所有的路由会同时发送ajax,不管你点不点击所要访问的页面,这些ajax都会放在内存当中,这是就会造成内存浪费,导致页面加载缓慢.
这时我们就会用到路由懒加载, 路由懒加载的原理通俗的讲就是将路径放入函数当中,使用的时候才会调用,这样的好处就是.可以解决内存的浪费,使代码更加的有条理性.

传统路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
 
export default router

路由懒加载写法：

import Vue from 'vue'
import VueRouter from 'vue-router'
 
const  Login = ()=> import('@/views/login/index.vue') 
 
const  Home = ()=>  import('@/views/home/home.vue')
 
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
 
export default router

最终写法：

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: () => import('@/views/login/index.vue') },
    { path: '/home',  component: () => import('@/views/home/home.vue') }
  ]
 
export default router

2.axios的进阶用法

由于传统发送axios不好维护,且复用性差,此时就有了axios.create([config]),在项目中,这种写法还是非常常见的,那么它怎么用的呢?

在创建较大项目的时候 就可以在scr根目录下创建api/xxx.js和utils/request.js,在这里写我们要用的ajax,这样不仅提高了复用性,还更便于维护

utils/request.js 代码示例如下

    import axios from 'axios'

    //此时request实例对象就是axios
   const request = axios.create {
       // 这里设置全局的默认接口地址
        baseURL: "这里写接口地址"
     }
   export default  request

api/xxx.js 代码示例如下

    import request from  "@/utils/request"
    
    //定义一个回到函数
    export const 函数名 = ()=>{
    return request ({
        url:"接口"
        method:'请求方式'
    })
    }

调用:示例在App.vue中调用

//注意:api/xxx.js返回的是一个promise对象,所以这里需要用async  await (.then()也可以)
 async created(){
   const res= await 定义的函数()
   console.log(res);
  }