【DAY42】vue学习

const routes = [
{ path: ‘/foo’, component: Foo },
{ path: ‘/bar’, component: Bar }
]定义路由的作用是什么

const routes 定义路由的作用是将每一个 URL 请求映射到一个组件，其中 path 表示请求的 URL，component 表示对应的组件。

通过 const routes 所定义的路由映射关系，可以让 Vue 应用能够响应浏览器地址栏中的 URL 变化，将对应的组件渲染到页面中。例如，当用户在浏览器中输入 example.com/foo 这个 URL 时，Vue 应用将会自动加载 Foo 组件。

需要注意的是，const routes 定义路由只是 Vue 路由系统的一部分，为了能够让路由正常工作，我们还需要使用 VueRouter 对象来启用路由。具体来说，我们需要在 Vue 应用的入口文件中引入 VueRouter，并创建一个 router 实例，将其传递给 Vue 应用的 Vue 实例，以启用路由。示例如下：

import Vue from 'vue'
import VueRouter from 'vue-router'import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'Vue.use(VueRouter)const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
]const router = new VueRouter({routes
})new Vue({router
}).$mount('#app')

在上述示例中，我们首先引入了 Vue、VueRouter 以及两个组件 Foo 和 Bar。接着，我们使用 Vue.use 方法来注册 VueRouter 插件，创建了一个 const routes 路由映射数组。最后，我们创建了一个 router 对象，将其传递给 Vue 实例，并通过 $mount 方法将 Vue 应用挂载到 #app DOM 元素上，以启用路由。

axios是一款用于 Node.js 和浏览器的基于 Promise 的 HTTP 客户端库，主要用于向服务器发送 HTTP 请求和处理响应。它可以用于 发送 GET、POST、PUT、DELETE 等 HTTP 请求，并支持请求拦截、响应拦截、请求超时等功能，常用于前端与后端进行数据交互。axios可以在浏览器和Node.js运行环境中使用，具有易用性和灵活性，被广泛应用于各类前端应用开发中。

什么叫做组件被挂载到DOM？

在 Vue.js 中，组件是在虚拟 DOM 中生成的，只有当组件被“挂载”到真实的 DOM 元素后，才能在页面中显示出来。

组件“挂载到 DOM”实际上是指 Vue.js 将组件的模板编译成 HTML 代码，并将它插入到指定的 DOM 元素中。这个过程一般是在组件的生命周期函数 mounted 中完成的。

当组件被挂载到 DOM 后，它就可以与用户进行交互了。例如，用户可以通过点击按钮或输入文本框等操作，触发组件内部的事件响应函数，从而实现页面的交互效果。

需要注意的是，当组件从 DOM 中被移除时，Vue.js 会自动触发另一个生命周期函数 beforeDestroy 和 destroyed，在这两个函数中，我们可以完成组件的一些清理工作，例如移除事件监听器、取消网络请求等操作。这些清理工作可以确保组件被正确地销毁，避免内存泄漏等问题。