Vue Router 路由实现原理实现原理

一、概念

  通过改变 URL,在不重新请求页面的情况下,更新页面视图。

二、实现方式

  更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式:

    1.Hash --- 利用 URL 中的hash("#");

    2.利用 History interface 在HTML5中新增的方法。

  Vue 中,它是通过 mode 这一参数控制路由的实现模式:

const router=new VueRouter({
    mode:‘history‘,
    routes:[...]
})

  创建 VueRouter 的实例对象时,mode 以构造参数的形式传入,如下代码:

  

 源码

  

  mode 参数:

    1.默认 hash

    2. history。如果浏览器不支持 history 新特性,则采用 hash

    3. 如果不在浏览器环境下,就采用 abstract(Node环境下)

    

  mode 区别:

    1. mode:"hash"  多了 “#”

http://localhost:8080/#/login

    

    2.mode:"history"

http://localhost:8080/recommend

  

  HashHistory:

    hash("#") 的作用是加载 URL 中指示网页中的位置。

    # 本身以及它后面的字符称职位 hash,可通过 window.location.hash 获取

    特点:

      1. hash 虽然出现在 url 中,但不会被包括在 http 请求中,它是用来指导浏览器动作的,对服务器端完全无用,因此,改变 hash 不会重新加载页面。

      2. 可以为 hash 的改变添加监听事件:

      window.addEventListener("hashchange",funcRef,false)

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

    利用 hash 的以上特点,就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

    HashHistory 拥有两个方法,一个是 push, 一个是 replace


1

两个方法:HashHistory.push() 和 HashHistory.replace()

  

    HashHistory.push()  将新路由添加到浏览器访问历史的栈顶

  

 HashHisttory.push()

    

    从设置路由改变到视图更新的流程:  


1

$router.push() --> HashHistory.push() --> History.transitionTo() --> History.updateRoute() --> {app._route = route} --> vm.render()

  

    解析:

1 $router.push() //调用方法

2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录(添加到栈顶)(window.location.hash= XXX)

3 History.transitionTo() //监测更新,更新则调用History.updateRoute()

4 History.updateRoute() //更新路由

5 {app._route= route} //替换当前app路由

6 vm.render() //更新视图

    transitionTo() 方法是父类中定义的是用来处理路由变化中的基础逻辑的,push() 方法最主要的是对 window 的 hash 进行了直接赋值:

  

window.location.hash=route.fullPath

    hash 的改变会自动添加到浏览器的访问历史记录中。
    那么视图的更新是怎么实现的呢,我们来看看父类 History 中的 transitionTo() 方法:

    

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const route = this.router.match(location, this.current)
  this.confirmTransition(route, () => {
    this.updateRoute(route)
    ...
  })
}

updateRoute (route: Route) {

  this.cb && this.cb(route)

}

listen (cb: Function) {
  this.cb = cb
}

    可以看到,当路由变化时,调用了Hitory中的this.cb方法,而this.cb方法是通过History.listen(cb)进行设置的,回到VueRouter类定义中,找到了在init()中对其进行了设置:

    

init (app: any /* Vue component instance */) {

  this.apps.push(app)

  history.listen(route => {
    this.apps.forEach((app) => {
      app._route = route
    })
  })
}

    HashHistory.replace()

      replace()方法与push()方法不同之处在于,它并不是将新路由添加到浏览器访问历史的栈顶,而是替换掉当前的路由

 HashHisttory.replace()

      

  HTML5History

    History interface 是浏览器历史记录栈提供的接口,通过back()、forward()、go()等方法,我们可以读取浏览器历史记录栈的信息,进行各种跳转操作。

    从 HTML5开始,History interface 提供了2个新的方法:pushState()、replaceState() 使得我们可以对浏览器历史记录栈进行修改:

  window.history.pushState(stateObject,title,url)
  window.history,replaceState(stateObject,title,url)

    

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

    title:所添加记录的标题

    url:所添加记录的 url

    

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

    

    1.push

      与hash模式类似,只是将window.hash改为history.pushState

    2.replace

      与hash模式类似,只是将window.replace改为history.replaceState

    3.监听地址变化

      在HTML5History的构造函数中监听popState(window.onpopstate)

    

 

  两种模式比较

  1. pushState设置的新URL可以是与当前URL同源的任意URL;而hash只可修改#后面的部分,故只可设置与当前同文档的URL
  2. pushState通过stateObject可以添加任意类型的数据到记录中;而hash只可添加短字符串
  3. pushState可额外设置title属性供后续使用
  4. history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误

原文地址:https://www.cnblogs.com/curedfisher/p/12271862.html

时间: 2024-11-08 21:00:13

Vue Router 路由实现原理实现原理的相关文章

04 Vue Router路由管理器

路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. Vue Router包含的功能有: 支持HTML5 历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 vue-router的基本使用 基本使用步骤 1.引入相关的库文件 导入vue文件为全局window对象挂载Vue构造函数

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

Vue Router 路由守卫:完整的导航解析流程

完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 5 在路由配置里调用 beforeEnter. 6 解析异步路由组件. 7 在被激活的组件里调用 beforeRouteEnter. 8 调用全局的 beforeResolve 守卫 (2.5+). 9 导航被确认. 10 调用全局的 afterEach 钩子. 11 触发 DOM 更新. 12 用

vue router路由(三)

当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) node_modules 根据package.json 安装依赖模块 src资源文件,基本文件都会放在这里 app.vue  父组件 main.js 入口文件 static构建好的文件会在这个目录 index.html 主页 1.首先安装路由通过npm: npm install vue-router 在

Vue Router 路由懒加载

将异步组件定义为一个返回Promise 的工厂函数. 函数样式的import()语法,是JavaScript新增加的模块加载语法,提案正处于TC39委员会的第四阶段.它返回一个Promise. 一 路由配置 import Vue from "vue"; import Router from "vue-router"; const Home = () => import(/*webpackChunkName:"home"*/ "./

vue router 路由的学习

新建vue项目的时候 你会发现有个文件夹叫router 这个文件夹下你可以设置一个index.js但是需要引入的两个包 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) 注册路由组件 export default new Router 默认加载这个路由 routes: [] 内部可以写你要配置的路由路径 path: '/' //配置地址 多数用来跳转的地址 nam: 'bac'// 一般用来路由跳转this

<keep-alive>控制Vue Router路由

只给部分组件加上<keep-alive>啊,在app.vue里这样 <!-- 这里是需要keepalive的 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 这里不会被keepalive --> <router-view v-if="!$route.m

路由及路由器工作原理深入解析2:路由原理

日志"路由及路由器工作原理深入解析1"http://user.qzone.qq.com/2756567163/blog/1438322342介绍了"为什么要使用路由器"和"TCP/IP V4 协议网络的分段原理"2个问题,本文将继续对路由的具体工作原理进行解析. 3.路由原理 当IP子网中的一台主机发送IP分组给同一IP子网的另一台主机时,它将直接把IP分组送到网络上,对方就能收到.而要送给不同IP子网上的主机时,它要选择一个能到达目的子网上的路

路由及路由器工作原理深入解析3:路由与端口

日志"路由及路由器工作原理深入解析1"http://user.qzone.qq.com/2756567163/blog/1438322342介绍了"为什么要使用路由器"和"TCP/IP V4 协议网络的分段原理"2个问题,日志"路由及路由器工作原理深入解析2"http://user.qzone.qq.com/2756567163/blog/1438329517介绍了路由的工作原理,并以一个具体实例的实现深入剖析了路由的实现过程