搞懂Vue-Router的概念和使用，看完这篇文章就够了(2)，妈妈再也不用担心我找工作了

说到路由，大家都会第一时间想到上图生活中的路由器；可以看到路由器上有几个网线口，每个网线口连接着一台电脑；

我们可将路由器的网线口看作key值，连接的电脑看作value值，每一个key对应着一个value，这就是路由；路由就是一种对应关系；

而多个路由（route）是由路由器（router）管理的，这就是两者的关系；

生活中的路由器就是为了实现多台设备可以共同上网，那我们编程中的路由呢，其实它们都是符合以下两点：

• 路由就是一组key–valued的对应关系

• 多个路由需要经过路由器管理

上图就是前端编程路由跳转的规则，点击导航根据路径跳转到对应的组件；也是一种映射关系，多个路由的映射关系由前端路由器统一管理配置；

二. 对SPA应用的理解

===========================================================================

编程中的路由是为了实现SPA（single page web application）应用（单页面应用）；

单页面应用就像vue和react只有一个html页面，页面和局部内容改变通过路由跳转完成；多页面应用就是多个html页面，经过点击链接跳转到对应的html页面；

对SPA（单页面应用）的理解：

• 单页面应用

• 整个应用只有一个完整的页面index.html

• 点击页面中的导航不会刷新页面，只会也页面局部更新

• 数据需要通过ajax请求获取

三. 后端路由和前端路由

===========================================================================

前面说过关于路由的概念：

1. 一个路由就是一组映射关系；

2. Key为路径，value可能就是一个函数或者组件

官方是这样定义的：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：嵌套路由映射，动态路由选择，模块化、基于组件的路由配置…

上面为什么说key路径对应的value有可能是一个函数，因为路由也 前端和后端之分；

后端路由：

• value是funtion，用于处理客户端提交的请求

• 服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

• value是component，用于显示页面内容

• 当浏览器路径发生变化时，对应的组件就会显示

四. 项目中路由基本使用

===========================================================================

路由的基本使用，其实官方介绍的很详细；这里注意一下，vue2.x版本使用路由V3.x版本，vue3.x版本使用路由V4.x版本；

如果你在最初创建项目的时候，选择一起安装vue-router的话，项目代码也就配置好了，下面我们来手动安装配置一下；（以vue3项目为例）

首先，在项目中安装vue-router

npm install vue-router@4

其次，在src文件夹下面创建一个router文件夹，并在其下创建index.js

import { createRouter, createWebHashHistory } from ‘vue-router’

import Login from ‘…/views/Login.vue’

const routes = [

{

path: ‘/login’,

component: Login

},

{

path: ‘/home’,

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

}

]

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

然后，在main.js里面注册路由

import {createApp } from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

const app = createApp(App)

app.use(router)

最后，在项目组件中添加 < router-view /> 视图

路由可以多层嵌套，这里就不多讲啦，具体可以查看官网中的嵌套路由的具体讲解；

五. 路由传参

======================================================================

• < router-link >标签传参

前面我写过专门的介绍，可点击vue中路由传参方式之一（router-link 进行页面按钮式路由跳转传参）查看；

• 编程式路由传参

前面我写过专门的介绍，可点击vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）查看；

六. 路由守卫

======================================================================

全局路由守卫
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

=“https://img-blog.csdnimg.cn/img_convert/e5dd403b4e9662b283a02588f5886540.jpeg” />

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

资料领取方式：戳这里前往免费领取