通用后台管理系统前端界面Ⅴ——axios使用与封装、配置路由和路由懒加载

axios使用与封装

1、下载axios

npm i -S axios

2、在 main.js导入使用axios，因为是用的比较多，所以采用的是全局引入，挂载到原型的方式

import axios from 'axios'
Vue.prototype.axios = axios // 挂载到原型,可在全局使用

配置路由

1、下载vue-router

npm i vue-router@3.5.3 -S

2、 配置路由(新建router文件夹和index.js文件)

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/',
            component: Home
        }
    ],
    mode: 'history'
})

3、 挂载使用

import Vue from 'vue'
import App from './App.vue'
import '../plugins/element'
import 'font-awesome/css/font-awesome.min.css'
import axios from 'axios'
import router from './router/index'
//或者这样导入：会自动找到index文件
//import router from './router'
Vue.config.productionTip = false
Vue.prototype.axios = axios
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4、使用：在App.vue设置路由出口

<router-view>router-view>

这样访问才有你内容：ps此前访问的一直是http://localhost:8080

 路由懒加载

我们在路由中通常会定义很多不同的页面。如果不应用懒加载的话，很多页面都会打包到同一个js文件中，文件将会异常的大。造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现短暂的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载用时。

也就是：只加载你当前点击的那个模块。按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）

实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。

实现1、：修改router文件夹下的index.js文件为下

    官方推荐的方法,使用ES中的import：component: () => import('@/component/Home')

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/home',
            component: () => import('@/components/Home')
        }
    ],
    mode: 'history'
})

前后对比：不许要先导入，后挂载。

实现2、： 使用Vue异步组件，修改router文件夹下的index.js文件为下
      component: resolve => require(['@/components/Home'], resolve)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/home',
            component: resolve => require(['@/components/Home'], resolve)
        }
    ],
    mode: 'history'
})