关键词：
1. 什么是路由
路由（英文：router）就是对应关系
2. SPA 与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。
此时，不同组件之间的切换需要通过前端路由来实现。
结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！
3. 什么是前端路由
通俗易懂的概念：Hash 地址与组件之间的对应关系。
4. 前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
结论：前端路由，指的是 Hash 地址与组件之间的对应关系！
5. 实现简易的前端路由
步骤1：通过 <component> 标签，结合 comName 动态渲染组件。示例代码如下：
步骤2：在 App.vue 组件中，为 <a> 链接添加对应的 hash 值：
步骤3：在 created 生命周期函数中，监听浏览器地址栏中 hash 地址的变化，动态切换要展示的组件的名称：
更多Vue内容：从vue2.0到vue3.0一套全覆盖，前端学习核心框架教程
黑马前端专栏干货多多，关注再学，好方便~
2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~
vue-router(代码片段)
...实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1.1后端路由后端路由是根据不同的用户URL请求，返回不同的内容，本质就是URL请求地址与服务器资源之间的对应关系。由服务器端进行实现，并完成资... 查看详情
十一路由(代码片段)
一、前端路由的概念与原理1.1、什么是路由路由（英文：router）就是对应关系。1.2、SPA与前端路由SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不... 查看详情
十一路由(代码片段)
一、前端路由的概念与原理1.1、什么是路由路由（英文：router）就是对应关系。1.2、SPA与前端路由SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不... 查看详情
十一路由(代码片段)
一、前端路由的概念与原理1.1、什么是路由路由（英文：router）就是对应关系。1.2、SPA与前端路由SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不... 查看详情
前端路由简单理解及应用(代码片段)
...和真实的资源之间就有一种对应关系，就是路由路由分为前端路由和后端路由后端路由1.概念：根据不同的用户URL请求，返回不同的内容2.本质：URL请求地址与服务器资源之间的对应关系前端路由1.概念：根据不同的用户事件，返... 查看详情
v-router路由基础(代码片段)
...由路由（英文：router）就是对应关系。2.SPA与前端路由SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现... 查看详情
浅谈前端路由原理hash和history(代码片段)
浅谈前端路由原理hash和history🎹序言🎸一、前端路由原理1、SPA2、什么时候需要路由🎷二、Hash模式1、定义2、网页url组成部分（1）了解几个url的属性（2）演示3、hash的特点🎺三、History模式1、定义... 查看详情
前端路由的原理
...由是根据不同的url地址展示不同的内容或页面使用场景？前端路由更多用在单页应用上,也就是SPA,因为单页应用,基本上都是前后端分离的,后端自然也就不会给前端提供路由。前端的路由和后端的路由在实现技术上不一样，但是... 查看详情
前端路由简介以及vue-router实现原理(代码片段)
后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样http://www.xxx.com/login大致流程可以看成这样：浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路... 查看详情
前端路由简介以及vue-router实现原理(代码片段)
后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样http://www.xxx.com/login大致流程可以看成这样：浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路... 查看详情
前端框架vue
Vue2/Vue3框架Vue基础Vue的响应式原理双向数据绑定的原理ComputedWatchMethodsv-if、v-show的区别v-if、v-show、v-html的原理slot的定义、作用与原理v-model的原理（语法糖）路由vuexvue3.0Vue基础Vue的响应式原理双向数据绑定的原理ComputedWa... 查看详情
编译原理模块二
编译的前端与后端概念上我们有时候把编译程序分成编译前端和编译后端。编译前端前端主要由源语言有关但与目标机无关的那些部分组成，通常包括词法分析、语法分析、语义分析与中间代码的产生，有的代码优化工作也可以... 查看详情
ospf路由协议之多区域的原理与配置
前面学习了OSPF路由协议的基本概念、工作过程以及单域的配置，但在大型网络中，网络结构的变化是时常发生的，随着网络路径的增加，路由表变得越来越大，仅有单域是远远不够的。为了解决这个问题，OSPF允许把大... 查看详情
reactreact全家桶路由简介与reactrouter5(代码片段)
文章目录1路由的基本概念与原理1.1路由1.2前端路由1.3后端路由1.4SPA2react-router-dom52.1基本组件2.2router组件（BrowserRouter、HashRouter）2.3react-router路由模式2.3.1hash模式2.3.2history模式2.4路由匹配组件（Route、Switch）2.5 查看详情
app路由框架与组件化简析(代码片段)
前端开发经常遇到一个词：路由，在AndroidAPP开发中，路由还经常和组件化开发强关联在一起，那么到底什么是路由，一个路由框架到底应该具备什么功能，实现原理是什么样的？路由是否是APP的强需求... 查看详情
app路由框架与组件化简析(代码片段)
前端开发经常遇到一个词：路由，在AndroidAPP开发中，路由还经常和组件化开发强关联在一起，那么到底什么是路由，一个路由框架到底应该具备什么功能，实现原理是什么样的？路由是否是APP的强需求... 查看详情
ospf路由协议工作原理认识与配置单区域
...F（OpenShortestPathFirst开放式最短路径优先）**属于链路状态路由选择协议，并且是公有标准，理论上是没有网络规模限制的；支持网络的层次化设计，可以将网络分为2层。层，是通过“区域”的概念来进行区分的。-骨干区域(area0)... 查看详情
原生js实现一个简单的前端路由（原理）
说一下前端路由实现的简要原理，以hash形式（也可以使用HistoryAPI来处理）为例，当url的hash发生变化时，触发hashchange注册的回调，回调中去进行不同的操作，进行不同的内容的展示。直接看代码或许更直观。1functionRouter(){2this.ro... 查看详情