冇事来学系--Vue2.0路由懒加载和axios优化

---

theme: Chinese-red

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」

路由懒加载

路由懒加载也可以叫做路由组件懒加载。经过了Webpack编译打包后，每个路由组件的代码分割成一个个js文件，初始化时不会加载这些js文件，只当激活路由组件才会去加载对应的js文件。

``` // 在src/router/index.js中 // 配置路由的一般写法 // 1.通过import引入组件 import Home from '../views/Home.vue' import About from '../views/About.vue'

// 2.配置路由规则 const router = new VueRouter({ routes:[ { name: 'Home', path: '/', component: Home }, { name: 'About', path: '/about', component: About } ] }) ```

要实现路由懒加载，则在配置路由规则的时候，需要使用import动态导入路由组件

```js // 在src/router/index.js中

// 给About组件设置懒加载 // 1.通过import引入组件 import Home from '../views/Home.vue'

const About = ()=> import ('../views/About.vue' /* WebpackChunkName: "about" */ ) //设置的WebpackChunkName，决定了控制台中显示的懒加载的文件名字，若不写则懒加载的文件会显示为0.js

// 2.配置路由规则 const router = new VueRouter({ routes:[ { name: 'Home', path: '/', component: Home }, { name: 'About', path: '/about', component: About } ] }) ```

<router-link> 的replace属性

1. 给 设置replace属性， 控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入模式，分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转的时候默认是push

3. 设置replace只会替换最近的一条记录，不影响前面push追加的记录
4. 开启replace模式：

``` 点我跳转

```

axios优化

平常使用axios请求数据，每次都要在组件中引入，略显麻烦

把axios挂载到vue实例的原型上并配置请求根路径

在main.js中引入axios，并让其成为vue实例的原型上的一个属性，这样就可以在所有组件中通过this来访问，而不用在每个组件中一一引入

``` import axios from 'axios'

// 全局配置axios的请求根路径 // axios.defaults.baseURL = '请求根路径' axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

Vue.prototype.$http = axios // 挂载到vue的原型上，在组件中要使用axios发起请求，直接调用this.$http.get/post ```

```js

```

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖