svg、vue中的路由模式原理。

，svg现在在公司也是很火的，比如点击时候不用来回的切换图标，只需要修改svg图的颜色就可以，

还说到了vue的路由懒加载，懒加载呢它不会一次性加载所有的路由，它是按需加载

vue路由主要用于实现单页应用

vue路由模式：history,hash(默认)

.router-link-active { //样式名 }给当前路由的底部字体样式

还有呢就是在router下的index.js中设置自定义类名

  routes,
  linkActiveClass: 'active' // 添加自定义类名
})

还有就是说了axios的一个拦截，axios的拦截分为请求拦截和响应拦截，

请求拦截就是向后台发送请求时候就执行的，可以做loding加载，数据权限的验证，预加载... 响应拦截就是后台将要把数据返回给前端的时候，做的一些处理，比如根据返回code码进行相应的处理。

在src目录下创建http文件夹，创建request.js文件：

/* eslint-disable prefer-promise-reject-errors */
import axios from 'axios'

const service = axios.create({
  baseURL: 'https://www.365msmk.com',
  //请求超时时间
  timeout: 3000
})
// 请求拦截
service.interceptors.request.use(config => {
  console.log(config)
  return config
}, _error => {
  return Promise.reject('请求出错')
})

// 响应拦截
service.interceptors.response.use(res => {
  return res
}, _error => {
  return Promise.reject('数据返回失败', _error)
})

export default service

创建api.js，主要负责对数据接口的统一管理

import request from './requset'

/**
 * 课程分类接口
 */
export function courseClassify () {
  return request({
    url: '/api/app/courseClassify',
    method: 'get'
  })
}
/**
* 名师阵容 精品课程
*/
export function famousTeacher () {
  return request({
    url: '/api/app/recommend/appIndex',
    method: 'get'
  })
}

在组件中通过

import { courseClassify,famousTeacher } from '../http/api'  来引入，然后调用方法