vue-router 跳转原理

vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于,路由跳转不需要刷新整个页面。

大概流程可以看成:

　　1. 浏览器发出请求

　　2.服务器监听到端口有请求过来,并解析url路径

　　3.根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等)

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

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

前端的路由

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 )// addEventListener() 方法用于向指定元素添加事件句柄。

Hash 方法是在路由中带有一个 #，主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，然后通过获取 location.hash 得到当前的路径标识符，再进行一些路由跳转的操作，参见 MDN

location.href：返回完整的 URL
location.hash：返回 URL 的锚部分
location.pathname：返回 URL 路径名
hashchange 事件：当 location.hash 发生改变时，将触发这个事件

比如访问一个路径 http://sherlocked93.club/base/#/page1，那么上面几个值分别为：

# http://sherlocked93.club/base/#/page1
{"href": "http://sherlocked93.club/base/#/page1","pathname": "/base/","hash": "#/page1"
}

注意： Hash 方法是利用了相当于页面锚点的功能，所以与原来的通过锚点定位来进行页面滚动定位的方式冲突，导致定位到错误的路由路径，因此需要采用别的办法，之前在写 progress-catalog 这个插件碰到了这个情况。

转载于:https://www.cnblogs.com/maxiag/p/11207461.html

vue-router 跳转原理相关推荐

Vue Router 路由实现原理
目录一.概念二.两种实现方式 HashHistory 简介特点方法 HashHistory.push() HashHistory.replace() HTML5History 简介特点方法 ...
vue router 跳转php,vue路由：路由跳转后怎么知道切换到那个router-view中
应用场景首浏围开幸,业来很广例量站标闪择以近览着发次尝试用vue 2.x重构传统页面.使用vue init webpack xxx 创建项目友持都发很秀框事,应编差里互是过是来本商理类了如则处果.展 ...
Vue Router 跳转拦截
所有路由需要验证登录 router.beforeEach((to, from, next) => {//设置延时器让created先执行在进行路由跳转setTimeout((res) => ...
Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
支持外部链接跳转的 Vue Router 扩展实现
本文内容问题现状改进思路话题延伸本文小结众所周知,Vue Router 是 Vue 中重要的插件之一,特别是在当下流行的单页面应用/SPA 中,这种感觉会越来越明显.此时,路由的作用就是根 ...
vue router 路由跳转方法概述
一.概述使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签使用router- ...
关于VUE Router不跳转原因
关于VUE Router不跳转原因之一以前也犯过的一个原因现在分享出来给大家页面显示 app.vue页面的代码总结以前也犯过的一个原因现在分享出来给大家上面的routers改成routes即 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
vue router name命名规范_vue-router使用
vue-router基本用法 vue-router的实现原理: 路由不同的页面也就是加载不同的组件. 路由的三个基本概念: router:它是一条路由,test按钮 => test内容,这是一条 ...

vue-router 跳转原理

vue-router 跳转原理相关推荐

最新文章

热门文章