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

关键词：

前端路由原理本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式

hash

history

www.test.com/##/ 就是 Hash URL，当 ## 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面。

vue-router hash实现源码（完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/hash.js#L22-L54）：

**
 * 添加 url hash 变化的监听器
 */
setupListeners () 
  const router = this.router

  /**
   * 每当 hash 变化时就解析路径
   * 匹配路由
   */
  window.addEventListener(‘hashchange‘, () => 
    const current = this.current
    /**
     * transitionTo: 
     * 匹配路由
     * 并通过路由配置，把新的页面 render 到 ui-view 的节点
     */
    this.transitionTo(getHash(), route => 
      replaceHash(route.fullPath)
    )
  )

检测到 hash 的变化后，就可以通过替换 DOM 的方式来实现页面的更换。

History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美观

两个 API ，pushState和replaceState可以改变 url 地址且不会发送请求，还有onpopState事件。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。具体可以访问官网：https://router.vuejs.org/zh/guide/essentials/history-mode.html

vue-router history实现源码（完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/html5.js）

export class HTML5History extends History 
  constructor (router, base) 
    super(router, base)
    /**
     * 原理还是跟 hash 实现一样
     * 通过监听 popstate 事件
     * 匹配路由，然后更新页面 DOM
     */
    window.addEventListener(‘popstate‘, e => 
      const current = this.current

      // Avoiding first `popstate` event dispatched in some browsers but first
      // history route not updated since async guard at the same time.
      const location = getLocation(this.base)
      if (this.current === START && location === initLocation) 
        return
      

      this.transitionTo(location, route => 
        if (supportsScroll) 
          handleScroll(router, route, current, true)
        
      )
    )
  

  go (n) 
    window.history.go(n)
  

  push (location, onComplete, onAbort) 
    const  current: fromRoute  = this
    this.transitionTo(location, route => 
      // 使用 pushState 更新 url，不会导致浏览器发送请求，从而不会刷新页面
      pushState(cleanPath(this.base + route.fullPath))
      onComplete && onComplete(route)
    , onAbort)
  

  replace (location, onComplete, onAbort) 
    const  current: fromRoute  = this
    this.transitionTo(location, route => 
      // replaceState 跟 pushState 的区别在于，不会记录到历史栈
      replaceState(cleanPath(this.base + route.fullPath))
      onComplete && onComplete(route)
    , onAbort)
  

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

后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样http://www.xxx.com/login大致流程可以看成这样：浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路... 查看详情

解析vue-router相关干货及工作原理(代码片段)

本文主要介绍了vue-router相关基础知识及单页面应用的工作原理，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。单页面工作原理是通过浏览器URL的#后面的hash变化... 查看详情

vue-router路由系统介绍(代码片段)

...值前端框架Vue/angular/react都很适合开发单页应用基本使用vue-router其是vue的核心插件1:下载npmivue-router-S1.5(重要):安装插件Vue.use(VueRouter);2:在main.js中引入vue-router对象importVueRouterform‘./x.js‘;3:创建路由对象varrouter=newVueRouter();4:配置路... 查看详情

vue-router的简单介绍及应用(代码片段)

　  vue-router是Vue的路由管理器，它是Vue的核心插件。在当前Vue项目中一般都是单页面应用，所以可以说vue-router它是应用在单页面中的。在web开发中，路由是指根据url分配到对应的处理程序，vue-router它通过对url的管理，实... 查看详情

vue-router(代码片段)

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

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

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

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

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

vue-router4.x教程(代码片段)

...ff0c;想要了解的可以去vue2路由教程下面开始上手路由认识vue-router目前前端流行的三大框架,都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-routervue-router是基于路由和组件的路由用于设定访问路径,将路径和组件映射起来.... 查看详情

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

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

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

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

vue-router(代码片段)

...面数据就行，称为单页面应用，简称SPA起步如果没有安装vue-router自己去看开发文档先npm下载然后在创建配置文件和基础配置文件的模板最后在main.js引入vue的路由是用什么APIhistory和hashwindow.history//方法有history.pushStatehistory.replaceSt... 查看详情

hcna——rip简单介绍及基本配置(代码片段)

HCNA——RIP简单介绍及基本配置路由信息协议RIP路由信息协议RIP（RoutingInformationProtocol）的简称，它是一种基于距离矢量（Distance-Vector）算法的协议，使用跳数作为度量来衡量到达目的网络的距离。RIP主要应用于规模较小的网络中... 查看详情

vue脚手架结构及vue-router路由配置(代码片段)

jquery选择器jQuery引入下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。jquery对象和dom对象jquery找到的标签对象称为--jquery... 查看详情

vue-router各个属性的作用及用法(代码片段)

　　vue-router是vue单页面开发的路由，就是决定页面跳转的！　　<router-link>组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址。Props属性1、to　　表示目标路由的链接。当被点击后，内部会立刻... 查看详情

vue-router源码解析router-link组件的用法及原理(代码片段)

该组件支持用户在具有路由功能的应用中(点击)导航,默认渲染成带有正确链接的<a>标签，可以通过tag属性生成别的标签。它本质上是通过在生成的标签上绑定了click事件，然后执行对应的VueRouter实例的push()实现的，对于router-... 查看详情

vue-router原理(代码片段)

hash路由<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><m 查看详情

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

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

路由懒加载及实现方式(vue-router)(代码片段)

vue-router路由懒加载及实现方式。文章目录前言一、路由懒加载二、实现路由懒加载1.Vue异步组件(异步加载)2.推荐方式-ES6的import() 3.webpack提供的require.ensure()实现懒加载前言什么是路由懒加载？--延迟加载，在需要的时候... 查看详情