vue-router实现原理

最新推荐文章于 2022-07-12 18:07:34 发布
最新推荐文章于 2022-07-12 18:07:34 发布
阅读量176 收藏
点赞数
分类专栏： 技术交流 传智播客西安中心
原文链接：http://bbs.itheima.com/forum.php?mod=viewthread&tid=505107
版权

1.原理核心就是 更新视图但不重新请求页面。
vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，根据mode参数来决定采用哪一种方式。
2.vue-router 提供了三种路由运行模式：
  hash: 使用 URL hash 值来作路由。默认模式。
  history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
  abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端
Hash模式
hash即浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。
也就是说即#是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中，不包含#。每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。
所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。
History模式
HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面；
由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

渐暖吧
关注
专栏目录
Vue-Router 介绍及路由原理分析
qq_53499304的博客
02-17 2万+
单页面开发模式的路由全权交由前端来控制，这里的路由不是我们说的路由器等硬件设备，它是前端的路径管理器。而 Vue-Router 是官方提供的路由插件，市面上也不乏路由管理插件，但是只有 Vue-Router 能和 Vue 深度集成完美搭配
vue-router 中常用的路由模式实现原理
qq_46617584的博客
05-13 568
hash 模式 location.hash 的值实际就是 URL 中#后面的东西 它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 可以为 hash 的改变添加监听事件 window.addEventListener("hashchange", funcRef, false); 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用 hash 的以
vue-router路由实现原理
codezha的博客
12-03 2431
通常我们使用Vue来开发单页面应用（SPA）时，通常都会使用vue-router来实现页面路由跳转。单页面应用采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。 Vue-router提供了以下几种路由跳转方法 方法 作用 router.push 添加新路由 router.replace 替换当前路由 router.go 跳转到指定索引路由 router.back 返回上一个路由 router.forward 跳转下一个路由 下面我们通过vue-ro
ms ：vue-router 中常用的路由模式实现 原理
m0_62096724的博客
05-13 259
面试
Vue的路由的hash和history的实现原理
qq_40957332的博客
09-06 1271
hash路由模式的实现主要是基于下面几个特性 URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送； hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换； 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值； 我们可以使用 hashchan
浅析vue-router实现原理及两种模式
10-15
本文将深入探讨 Vue Router 的实现原理及其两种主要工作模式：Hash 模式和 History 模式。 1. **Vue Router 的核心原理** Vue Router 的主要目标是在不重新加载整个页面的情况下，根据 URL 的变化更新视图。它通过...
浅析前端路由简介以及vue-router实现原理
08-27
2. New VueRouter：创建一个新的 Vue Router 实例，传入配置选项。 3. HashHistory：Vue Router 使用 hash 模式来实现路由。 Vue Router 的优势在于它提供了灵活的路由配置、灵活的视图组件、灵活的导航守卫等功能...
详解Vue-Router源码分析路由实现原理
11-28
4. 创建VueRouter实例，传入定义好的路由配置。 5. 将创建的VueRouter实例注入到Vue根实例中。 6. 使用`<router-link>`和`<router-view>`组件进行导航和视图展示。 Vue-Router的核心在于它的路由匹配和组件渲染。当...
Vue Router 路由实现原理
weixin_52148548的博客
05-23 1297
目录一、概念二、两种实现方式HashHistory简介特点方法HashHistory.push()HashHistory.replace()HTML5History简介特点方法history.pushState()history.replaceState()三、两种模式比较 一、概念 通过改变URL，在不重新请求页面的情况下，更新页面视图。 二、两种实现方式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： Hash—利用URL中的hash(“#”);
【vue回顾系列】20-大白话讲解vue-router路由实现的基本原理，保证让你绝对能懂！
庞囧的博客
03-28 1322
文章相较于之前做了删减，将稍微深入一点的知识点（例如源码，拓展）和一些表述比较乱的地方剔除，目的是为了能够用最小精力去记住，并且输出。在过去的前后端未分离时代，页面的每次跳转都是请求对应的html文件到浏览器进行渲染，页面才能展示。而现在前后端分离时代，客户端一次性加载大部分的前端文件，url变化时，不用向后台请求新的html文件，只需要将当前页面内的html内容进行更换，渲染，就可以实现页面内容的切换。这就是单页面，简称SPA。
vue-router实现原理及两种模式
Mr_linjw的专栏
03-04 679
vue-router 的两种方式（浏览器环境下） 1. Hash （对应HashHistory） hash（“#”）符号的本来作用是加在URL中指示网页中的位置： http://www.example.com/index.html#print #符号本身以及它后面的字符称之为hash(也就是我之前为什么地址栏都会有一个‘#')，可通过window.location.hash属性读取。它具有如下特点： hash虽然出现在URL中，但不会被包括在HTTP请求中。它是用来指导浏览器动作的，对服务器端完全
关于vue-router的两种模式以及原理
Edasi的博客
08-13 3331
一、简介 众所周知vue-router 有两种模式 一种是hash模式 一种是history模式 首先是hash模式 hash ——即地址栏URL中的#符号 比如这个URL：http://www.baidu.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。 history ——利用了HTML5 History Interface 中新增的pushState() 和r
前端 - history
kelly0721的博客
10-09 1112
一、History的几个基本方法 back()：回退到上一个访问记录; 在历史记录中后退：window.history.back(); forward()：前进到下一个访问记录; 在历史记录中前进：window.history.forward(); go(num)：跳转到相应的访问记录;其中num大于0，则前进;小于0，则后退; 例如：后退一页window.history.go(-1)...
vue-Router实现原理
田兴的博客
10-27 6196
一、前端路由概念 通过改变 URL，在不重新请求页面的情况下，更新页面视图。 二、vue-Router两种模式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： Hash — 默认值，利用 URL 中的hash("#") 、 history-- 利用URL中的路径（/home） 如何设置路由模式 const router=new VueRouter({ mode:'history', routes:[...] }) m
vue-router路由模式的区别和原理
Senora的博客
07-12 5976
vue-router前端路由有两种模式，hash模式和history模式 hash 原理：灵活运用了 html的瞄点功能，改变 # 后的路径本质上是更换了当前页面的瞄点，所以不会刷新页面。通过监听浏览器的 onhashchange()事件变化，查找对应的路由规则。 history 原理： 利用 H5的 history中新增的两个API ：pushState()和 replaceState()和一个事件onpopstate监听URL变化。 文章内容还有hash和history模式的区别以及优缺点...
Vue-Router的基本原理
前端初学者
03-31 3865
Vue-Router的使用原理，路由实现的两种模式以及优缺点
Vue-Router路由模式的选择和底层原理
鸭绒的博客
04-17 1186
1.路由类型 Hash模式：丑，无法使用锚点定位。 History模式：需要后端配合，IE9不兼容(可使用强制刷新处理IE9不兼容) 即可以根据两种模式的特点来进行路由选择。比如：当你的页面需要很多锚点进行定位时< a href="#new_paper" />，点击改链接跳转到页面的新闻部分，那么Hash模式是无法实现的，因为它自身带了#。 2.底层原理 如果我们去看Vue-Router的底层代码可能会优点晦涩难懂，下面总结以下底层原理，有哪些方式可以触发路由的更新呢？下面这张图一目了然：
vue-router 中hash和history路由模式实现原理是什么
a378113472的博客
07-09 1281
今天爱分享给大家带来vue-router 中hash和history路由模式实现原理是什么【面试题详解】，希望能够帮助到大家。 （1）hash 模式的实现原理 早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 ‘#search’： https://www.word.com#search hash 路由模式的实现主要是基于下面几个特性： URL 中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值