前端路由简介以及vue-router实现原理(代码片段)

关键词：

后端路由简介

路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样

http://www.xxx.com/login

大致流程可以看成这样：

1. 浏览器发出请求

2. 服务器监听到80端口（或443）有请求过来，并解析url路径

3. 根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）

4. 浏览器根据数据包的 Content-Type 来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

前端路由

1. hash 模式

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。 类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：

http://www.xxx.com/#/login

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate ()    // todo 匹配 hash 做 dom 更新操作window.addEventListener(‘hashchange‘, matchAndUpdate)

2. history 模式

14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate ()    // todo 匹配路径 做 dom 更新操作window.addEventListener(‘popstate‘, matchAndUpdate)

Vue router 实现

我们来看一下vue-router是如何定义的：

import VueRouter from ‘vue-router‘Vue.use(VueRouter)const router = new VueRouter(  mode: ‘history‘,  routes: [...]
)new Vue(
  router
  ...
)

可以看出来vue-router是通过 Vue.use的方法被注入进 Vue 实例中，在使用的时候我们需要全局用到 vue-router的router-view和router-link组件，以及this.$router/$route这样的实例对象。那么是如何实现这些操作的呢？下面我会分几个章节详细的带你进入vue-router的世界。(阅读源码是有点枯燥，但是带着问题去了解，就感觉很有意思。如果你对 vue-router 的实现机制也存在一些疑问，可以一起探讨交流)

 

前端路由原理及vue-router介绍(代码片段)

...nge 事件来监听到URL的变化，从而进行跳转页面。 vue-routerhash实现源码（完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/hash.js#L22-L54）：***添加urlhash变化的监听器*/setupListeners()constrouter=this.router/***每当hash变化时... 查看详情

vue-router(代码片段)

Vue-Router一.路由的概念与原理路由的本质就是一种对应关系，比如我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为... 查看详情

vue3中的vue-router简单实现以及router变迁带来的思考(代码片段)

jQuery以及之前的时候，前端工程师并不需要了解路由的概念。对于每次的页面跳转，都由后端开发人员来负责重新渲染模板。前端依赖后端，并且前端不需要负责路由的这种开发方式，这样开发速度会很快、后端... 查看详情

vue-router实现原理(代码片段)

vue-router实现原理近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录下。我们知道vue-router是vue的核心插件，而当前vue项目一般都是单页面应用，也就是说vue-router是应用在单页面应用中的... 查看详情

vue3中的vue-router简单实现以及router变迁带来的思考(代码片段)

jQuery以及之前的时候，前端工程师并不需要了解路由的概念。对于每次的页面跳转，都由后端开发人员来负责重新渲染模板。前端依赖后端，并且前端不需要负责路由的这种开发方式，这样开发速度会很快、后端... 查看详情

vue路由核心要点（vue-router）(代码片段)

目录目录1.vue-router是什么?2.如何使用v-router?3.vue-router跳转和传参4.vue-router实现的原理两种模式5.vue-router有哪几种导航钩子?6.$route和$router的区别7.vue-router响应路由参数的变化8.vue-router实现路由懒加载（动态加载路由）目录引言：... 查看详情

前端路由跳转基本原理(代码片段)

...都有自己的典型路由解决方案，@angular/router、react-router、vue-router。一般来说，这些路由插件总是提供两种不同方式的路由方式：Hash和History，有时也会提供 查看详情

前端权限控制-基于vue-router的动态路由实现

...，但在浏览器地址栏输入访问路径依然可以访问，可以用vue-router的动态路由来实现权限控制。登录成功后通过addRoutes更新路由配置正常情况下这样就可以实现动态路由控制了，但刷新页面发现会出现404，因为刷新时vue实例重新... 查看详情

atp应用测试平台——关于vue-router前端路由的配置使用案例(代码片段)

...件之一，本节我们简单介绍一下在vue项目中如何使用vue-router组件实现页面的路由跳转。源码地址：https://gitee.com/northcangap/atp。 查看详情

vue2.0笔记——vue-router路由(代码片段)

简介使用Vue.js开发SPA（SinglePageApplication）单页面应用。vue-router可以通过html5的historyAPI或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router可以实现页面间传参等其他功能；基本用法当你要把vue-ro... 查看详情

前端hash路由基本原理,及代码的基本实现

...，随着ajax的出现，页面实现非reload就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录url来记录ajax的变化，从而实现前端路由。（可以根据不同的url来展示不同的页面，很好的优化了页面的交互体验。）目前有... 查看详情

vue安装并使用路由和路由器实现页面跳转(代码片段)

...先需要安装它，但是安装之前需要考虑一个版本问题vue-router版本问题2022年2月7日以后，vue-router的默认版本升级为4版本，并且vue-router只能作用于vue3中，vue_router3才能在vue2中使用，如果把vue-router4强行安装在vue2... 查看详情

vue安装并使用路由和路由器实现页面跳转(代码片段)

...先需要安装它，但是安装之前需要考虑一个版本问题vue-router版本问题2022年2月7日以后，vue-router的默认版本升级为4版本，并且vue-router只能作用于vue3中，vue_router3才能在vue2中使用，如果把vue-router4强行安装在vue2... 查看详情

vue-router(代码片段)

简介vue-router和vue.js是深度集成的，适用于单页面应用，传统的路由是用一些产链接来实现页面切换和跳转。而vue-router在单页面应用中，则是组件之间的切换，其本质就是：建立并管理url和对应组件之间的映射关系。动态路由匹... 查看详情

从零开始，用elementui躺坑vue-router原理分析

上一篇，小编讲到在vue-router中是通过mode这一参数控制路由的实现模式的。今天就让我们深入去观摩vue-router源码是如何实现路由的路由起源-后端路由路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到... 查看详情

前端笔记整理（vue）(代码片段)

...？原理是什么？Vue路由vue路由模式路由导航方式Vue-router有几种钩子函数？组件通信axios拦截器配置webpackplugin和loader的不同webpack构建流程是？ 查看详情

vue教程(四十一)vue-router路由初体验(代码片段)

Vue教程(四十一)Vue-router路由初体验什么是路由路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的... 查看详情

vue教程(四十一)vue-router路由初体验(代码片段)

Vue教程(四十一)Vue-router路由初体验什么是路由路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的... 查看详情