2024年前端最全vue路由全面详解（上）：基本使用、多级路由、工作模式，2024年最新阿里快手拼多多等7家大厂前端面试真题

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

理解

–

vue 提出了路由 route 的概念。 vue 中的路由 route ，是一组映射关系（ key - value ），key 是路径，value 是组件，也就是路径与组件之间的映射。 多个路由需要路由器（router）进行管理。

注意：vue 中的路由 route ，与我们在计算机网络中的路由 没有任何关系，他们只是 同名 而已！

原始 html 中我们使用 a 标签实现 html 页面之间的跳转，使用路由之后，如果我们进行组件（也就是页面）切换与跳转，那么路由可以帮我们实现局部切换，不会全部刷新页面，节省开销。

一.基本使用

---

1.安装

在创建 vue 项目时，我们可以选择自定义安装**路由，**也可以选择默认安装，之后，在终端使用命令安装：

npm i vue-router

2.应用插件

在 src文件夹下，新建 router 文件夹，新建文件 index.js

在 main.js 中引入路由，并应用路由插件

3.编写 router 配置项

在 index.js 中写 router 配置项，将组件与路径，建立映射关系。

注意：要先引入组件和路由，下面是直接导入组件

按需导入组件：只需要将上图的第9和13行，改为下面的形式即可

component: () => import(‘…/views/Home.vue’)

小案例展示：

App 组件中引入 About 和 Home 组件，About 和 Home 组件映射了路由路径

接下来，我们来实现路由的切换。

第1步，借助 router-link 标签

Home主页

About关于

其中：active-class 可配置高亮样式  ，to 后面是我们所要跳转的目标路径 path

** **指定组件展示的位置

鼠标点击 Home主页，下方切换到 Home 组件的内容；

鼠标点击 About关于，下方切换到 About 组件的内容，

 

二、多级路由

---

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-pRvegO12-1715512042137)]