单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,

实现这一点主要是两种方式:

1.Hash: 通过改变hash值

2.History: 利用history对象新特性（详情可出门左拐见: http://www.cnblogs.com/yanze/p/7641774.html）

而在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:

默认Hash–>如果浏览器支持History新特性改用History–>如果不在浏览器环境则使用abstract

选好mode后创建history对象(HashHistory或HTML5History或AbstractHistory)

Hash

1.push() 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图

调用流程:

（1） $router.push() //显式调用方法

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

（3） History.transitionTo() //开始更新

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

（5） {app._route= route}

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

2.replace

功能: 替换当前路由并更新视图，常用情况是地址栏直接输入新地址

流程与push基本一致

但流程2变为替换当前hash （window.location.replace= XXX）

3.监听地址栏变化

在setupListeners中监听hash变化(window.onhashchange)并调用replace

History

1.push

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

2.replace

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

3.监听地址变化

在HTML5History的构造函数中监听popState（window.onpopstate）

两种模式对比

History模式的优点:

1.History模式的地址栏更美观。

2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不同的html文件），而hash只能是同一文档

3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据

4.History模式的pushState、replaceState参数中的title能携带字符串数据（当然，部分浏览器，例如firefox不支持title，一般title设为null，不建议使用）

缺点:

对于单页面应用来说，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操作靠ajax完成，

而不会重新请求页面。

但当用户直接在用户栏输入地址时则会重新请求，当地址带有参数时两者情况不一样

Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，所以请求的仍然是 xxx.com,没有问题

History 例如: xxx.com/id=5 这时请求的便是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>vue路由原理</title>

<style media="screen" type="text/css">

  *{margin:0;padding:0;}

  li{list-style:none;}

  #app{width:450px;margin:0 auto;}

  .nav{overflow:hidden;}

  .nav li{float:left;margin: 10px;}

</style>

<script type="text/javascript" src="vue.js"></script>

</head>

<body>

<div id="app">

  <ul class="nav">

    <li v-for="item in types"><a :href="'#/'+item.link">{{item.title}}</a></li>

  </ul>

  <component v-bind:is="show"></component>

</div>

<script type="text/javascript">

  Vue.component('zy',{

    template:'<h2>这是主页</h2>'

  })

  Vue.component('rz',{

    template:'<h2>这是日志</h2>'

  })

  Vue.component('xc',{

    template:'<h2>这是相册</h2>'

  })

  var app=new Vue({

    'el':'#app',

    data:{

      types:[

        {title:'主页',link:'zy'},

        {title:'日志',link:'rz'},

        {title:'相册',link:'xc'}

      ],

      show:'zy'

    }

  })

  //自定义路由，vue没有提供路由方法

  function router(){

    //window.location.href和window.location.hash的区别

    //window.location.href 获取完整的url

    //window.location.hash 获取锚链接，相比如href,通过window.location.hash并不会跳转到新的链接，只会在当前链接里面改变锚链

    var str=location.hash;

    console.log(str);

    str=str.slice(1);

    str=str.replace(/^\//,'');

    //获取 # 后面的值

    var map={

      'zy':true,

      'rz':true,

      'xc':true

    };

    if(map[str]){

      app.show=str;

    }

    else{

      app.show='zy';

    }

  }

  window.addEventListener("load",router);

  //当hash 值改变的时候，监听hashchange事件

  window.addEventListener("hashchange",router);

</script>

</body>

</html>

源码地址： https://github.com/zuobaiquan/js-principle-analysis/blob/master/vue路由原理/index.html

vue路由原理剖析的更多相关文章

  1. 浅谈vue路由原理

    Vue的路由实现:hash模式 和 history模式 hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取: 特点:hash虽然在UR ...

  2. C#进阶系列——WebApi 路由机制剖析：你准备好了吗？

    前言:从MVC到WebApi,路由机制一直是伴随着这些技术的一个重要组成部分. 它可以很简单:如果你仅仅只需要会用一些简单的路由,如/Home/Index,那么你只需要配置一个默认路由就能简单搞定: ...

  3. ASP.NET Core 运行原理剖析2:Startup 和 Middleware(中间件)

    ASP.NET Core 运行原理剖析2:Startup 和 Middleware(中间件) Startup Class 1.Startup Constructor(构造函数) 2.Configure ...

  4. ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行

    ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行 核心框架 ASP.NET Core APP 创建与运行 总结 之前两篇文章简析.NET Core 以及与 .NET Framew ...

  5. ASP.NET Core 运行原理剖析

    1. ASP.NET Core 运行原理剖析 1.1. 概述 1.2. 文件配置 1.2.1. Starup文件配置 Configure ConfigureServices 1.2.2. appset ...

  6. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  7. 开源 serverless 产品原理剖析 - Kubeless

    背景 Serverless 架构的出现让开发者不用过多地考虑传统的服务器采购.硬件运维.网络拓扑.资源扩容等问题,可以将更多的精力放在业务的拓展和创新上. 随着 serverless 概念的深入人心, ...

  8. ARouter原理剖析及手动实现

    ARouter原理剖析及手动实现 前言 路由跳转在项目中用了一段时间了,最近对Android中的ARouter路由原理也是研究了一番,于是就给大家分享一下自己的心得体会,并教大家如何实现一款简易的路由 ...

  9. vue-router路由原理

    Vue-router路由原理 目前实现路由的方式有两中,vue通过参数mode来设置,默认是hash模式. 利用URL中的hash(‘#’)来实现 利用History interface在HTML5中 ...

随机推荐

  1. ubuntu安装chkconfig.deb系统服务管理工具

    chkconfig简介:chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息. 参数用法:   --add 增加所指定的系统服务,让chkconfig指令得以管理它,并同时在系统 ...

  2. 前端知识点总结(HTML)

    前端知识点总结(HTML) 一,头部常用的标签 1,link标签  (1),设置ico图标 <link rel="shortcut icon" href="favi ...

  3. PermGen space 内存溢出

    1.修改D:\tools\tomcat\tomcat - 7\apache-tomcat-7.0.91\bin tomcat 路径下bin 文件的catalina.bat文件 添加 JAVA_OPTS ...

  4. python爬虫之win7Mongod安装使用

    1.下载地址:https://www.mongodb.com/download-center#community 下载完成以后下一步下一步安装. 安装路径 还需要建立一个数据库存储位置C:\mongo ...

  5. uwsgi加nginx部署django restframework前后端分离项目

    一.uwsgi和nginx简介 1.uwsgi(摘抄于百度百科): uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与 ...

  6. 关于jenkins旧的构建导致磁盘空间不足问题

    简述: Jenkins在每一次的执行构建后,都会对该构建的项目生成一个历史构建记录以及生成一份历史构建的项目发布包,长期累积可能会占用大量磁盘空间 jenkins构建jobs路径如下图: 解决办法: ...

  7. Chrome 75 & lazy-loading

    Chrome 75 & lazy-loading https://addyosmani.com/blog/lazy-loading/ https://chromestatus.com/feat ...

  8. 十分钟了结MySQL information_schema

    information_schema数据库是MySQL系统自带的数据库,它提供了数据库元数据的访问方式.感觉information_schema就像是MySQL实例的一个百科全书,记录了数据库当中大部 ...

  9. b2b

    sku(Stock Keeping Unit)(件)最小库存量单位. spu(一款) 一种详细的规格参数有时候跟spu,规格参数加上颜色+尺寸什么的唯一确定了一个手机,对应的就是sku spu:一款产 ...

  10. Python读取excel中的图片

    作为Java程序员,Java自然是最主要的编程语言.但是Java适合完成大型项目,对于平时工作中小的工作任务,需要快速完成,易于修改和调试,使用Java显得很繁琐,需要进行类的设计,打成jar包,出现 ...