vue路由原理

Vue路由原理

目前实现路由的方式有两中，vue通过参数mode来设置，默认是hash模式。

  1. 利用URL中的hash(‘#’)来实现
  2. 利用History interface在HTML5中新增的方法

history对应的是HTML5History对象，hash对应的是HashHistory对象，abstract对应的是AbstractHistory对象。在初始化对应的history之前，会对mode做一些校验：若浏览器不支持HTML5History方式（通过supportsPushState遍历判断），则mode设为hash，若不是在浏览器环境下运行，则mode设为abstract

VueRouter类中的onReady(),push()等方法只是一个代理，实际是调用的具体history对象的对应方法，在init（）方法中初始化时，也是根据history对象具体的类别执行不同操作

HashHistory

Hash(‘#’)符号的本来作用是加在URL指示网页中的位置，#本身以及它后面的字符称之为hash，通过window.location.hash属性来获取

Hash虽然出现在url中，但不会被包括在http请求中，它是用来指导浏览器动作的，对服务端完全无用，因此改变hash不会重新加载页面，如果是手动在url添加hash，这时可以为hash的改变添加监听事件

Window.addEventListener(‘hashchange’,funcRef,false)

每一次改变hash(window.location.hash)都会在浏览器访问历史中增加一个记录

执行vue里的push()方法最主要的是对window的hash进行直接赋值

Window.location.hash = route.fullPath

$router.push()  -> HashHistory.push()  -> History.transitionTo()  -> History.updateRoute() -> vm.render()

HashHistory.replace()

Replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史栈顶，而是替换掉当前的路由，背后它实际上是调用window.location.replace方法将路由进行替换

监听地址栏

VueRouter.push()和VueRouter.replace()是可以在vue组件的逻辑代码中直接调用的，除此之外在浏览器中，用户还可以手动在浏览器地址栏中输入url，因此还需要监听浏览器地址栏中路由的变化，并具有与通过代码调用的相同响应行为，在History中通过setupListeners监听hashchange实现：

Window.addEventListener(‘hashchange’,function () {}),当在浏览器地址栏直接输入路由相当于代码调用了replace()方法

HTML5History

History interface是浏览器历史记录栈提供的接口，back(),forward(),go()等方法，HTML5提供了pushState(),replateState()这两个方法

Window.history.pushState(stateObject,title,url)

Window.history.replateState(stateObject,title,url)

stateObject：当浏览器跳转到新的状态时，将触发popState事件，该事件将携带这个stateObject参数的副本

title：所添加记录的标题

url：所添加记录的url

这两个方法有个共同特点：当调用他们修改浏览器历史栈后，虽然当前url改变了，但浏览器不会立即发送请求该url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础

History与hash模式基本类似，只不过将对window.location.hash()直接进行赋值window.location.replate()改为调用了window.location.history.pushState()和window.location.replateState()方法，而HTML5History中添加对修改浏览器地址栏url的监听popstate是直接在构造函数中执行的

Window.addEventListeners(‘popstate’，e => {// 执行相应的功能})

HTML5History需要浏览器的支持，vue是通过supportPushState()来检查

除这两中模式外，vue-router还未非浏览器环境准备了一个abstract模式，原理是用一个数组stack模拟除浏览器历史记录栈的功能

两中模式比较

调用history.pushState()相比直接修改hash主要有以下优势：

  1. pushState设置的新url可以是与当前url同源的任意url，而hash只可修改#后面的部分，故可设置与当前同文档的url
  2. pushState设置的新url可以与当前url一模一样，这样也会把记录添加到栈中，而hash设置的新的值必须与原来不一样才会触发记录添加到栈中
  3. pushState通过stateObject可以添加任意类型的数据记录中，而hash只可添加短字符串
  4. pushState可额外设置title属性供后续使用

history模式问题

对于单页面应用来说，理想的使用场景是仅仅在进入用用时加载index’.html，后续在网络操作通过ajax完成，不会根据url重新请求页面，但是如果用户直接在地址栏中输入并回车，浏览器重启重新加载等特殊情况

Hash模式仅仅改变hash部分的内容，而hash部分是不会包含在http请求中的，就是#以及后面的是不会包含在请求当中的

http://baidu.com/#user/id      //如请求，只会发送http://baidu.com

所以hash模式下遇到根据url请求页面不会有问题

而history模式则将url修改的就和政策请求后端的url一样，history不带#。http://baidu.com/user/id

如果这种向后端发送请求的话，后端没有配置对应/user/id的路由处理，会返回404错误

官方推荐的解决方法是在服务端增加一个覆盖所有情况的候选资源：如果url匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。同时这么做以后，服务器就不再返回404错误页面，因为对于所有路径都会返回index.html文件。为了避免这种情况，在vue应用里面覆盖所有的路由情况，然后再给出一个404页面。或者如果是用node.js做后台，可以使用服务端的路由来匹配url，当没有匹配到路由的时候返回404，从而实现fallback

原文地址：https://www.cnblogs.com/maggie-pan/p/10025452.html

时间： 2024-11-06 11:46:09

vue路由原理的相关文章

Vue路由学习心得

GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击login按钮时,页面就显示login的内容,也可以说是一种映射,所有在页面上有两个部分,一个是点击部分,一个是显示部分. 2.路由中有三个基本的概念,route,routes,router. 1.route:它是一个路由,是一个单数,点击Home按钮->Home内容 2.routes:它是一组路由,

vue 路由知识点梳理及应用场景整理

最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理 说实话,路由我一直也就光顾着用,没认真思考过这个问题,还是那次人家面试问了这个,我才反应过来是应该好好的了解一下了. 无刷新跳转页面,是单页应用的一大优势,用户体验好,加载速度快,vue 路由的跳转就是无刷新的,它有两种形式,可以在定义路由的时候通过 mode 字段去配置,如果不配置这个字段,那么默认使用的就是 hash

【Vue路由系统详述】 -- 2019-08-08 18:01:24

目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"#"号 原文: http://106.13.73.98/__/55/ 一切分离都是为了更好的结合,本文详细介绍了前后端架构分离之后,前端如何实现路由的控制,即Vue路由系统--VueRouter. VueRouter下载地址(默认最新版本):https://unpkg.com/[email prote

【Vue路由系统详述】 񲱑

目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"#"号 原文: http://blog.gqylpy.com/gqy/280 "一切分离都是为了更好的结合,本文详细介绍了前后端架构分离之后,前端如何实现路由的控制,即Vue路由系统--VueRouter. VueRouter下载地址(默认最新版本):https://unpkg.com/[e

vue路由介绍及使用

vue-router:官方提供的vue路由插件 使用流程: 下载:npm I -S vue-router 引用:import VueRouter from 'vue-router' 注册:Vue.use(VueRouter) 路由配置: const routes=[ {path:'/films',component:Films}, //path:路径 component:组件名 {path:'/cinemas',component:Cinemas}, {path:'/center',compon

初印象至Vue路由

初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路由使用超链接 以下内容来自官网,js使用ES6 如何在vue项目中使用vue-router HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="htt

Web API 1入门之Self-Host寄宿及路由原理（二）

前言 刚开始表面上感觉Web API内容似乎没什么,也就是返回JSON数据,事实上远非我所想,不去研究不知道,其中的水还是比较深,那又如何,一步一个脚印来学习都将迎刃而解. Self-Host 我们知道Web API它可以快速为HTTP客户端提供API来创建Web服务,为何如此这样说呢?因为我们可以将其作为主机也就是一个服务器来用完全不需要IIS,这就是我们下面要讲的第一个内容Self-Host,实现对Web API寄宿的方式有多种并且都是独立于ASP.NET框架之外,如下Self-Host寄宿

ASP.NET MVC 5 Web编程2 -- URL映射(路由原理)

本章将讲述ASP.NET MVC5 的路由原理,即URL映射机制. 简单点就是解释:为什么MVC在浏览器输入地址就能访问到类(或类中的方法)?这是怎么做到的?我自己可以通过.NET写出一个自己的MVC框架吗? 答案是:可以. 模拟URL映射 先来看一个Demo,在传统的.NET WebForms项目中,实现URL的拦截. 打开VS2013,新建一个“ASP.NET Web窗体应用程序”项目,并取名为Demo4URLRouting. 为了方便测试,注释掉Default.aspx页面的内容和模板引用

Vue - 路由传递参数

Vue 2.0  路由传递参数 Vue 路由传递参数 有两种方式: 一.用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示: 1 <p>{{ $route.name}}</p&