单页面应用(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. 用Python删除本地目录下某一时间点之前创建的文件

    参考http://www.cnblogs.com/iderek/p/8035757.html os.listdir(dirname):列出dirname下的目录和文件 os.getcwd():获得当前 ...

  2. js 翻牌活动效果

    直接上代码 html: <div class="index_main"> <ul class="index_card"> <li ...

  3. CentOS7 下面安装jdk1.8

    1. 卸载已有的jdk rpm -qa |grep jdk |xargs rpm -e --nodeps 2. 使用xftp上传 jdk 的文件我这里上传的是 jdk-8u121-linux-x64. ...

  4. java随笔2 变量类定义

    如果要定义变量为对象,就要创建此对象对应的java类, 且定义的类型为类名,且都为private

  5. 小程序获取当前页面URL

    var pages = getCurrentPages() //获取加载的页面 var currentPage = pages[pages.length-1] //获取当前页面的对象 var url ...

  6. Unable to handle kernel paging request at virtual address

    1.Unable to handle kernel paging request at virtual address 00000000 =====>越出内核地址空间范围,原因是由于使用空NUL ...

  7. 在windows 7上安装TensorFlow

    TensorFlow是一个开源软件库,用于各种感知和语言理解任务的机器学习.目前被50个团队用于研究和生产许多Google商业产品,如语音识别.Gmail.Google 相册和搜索,其中许多产品曾使用 ...

  8. myisam和innodb的区别对比

    1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...

  9. python数学第八天【协方差】

  10. 老男孩python学习自修第十天【三元表达式与lambda表达式】

    例如: 1.使用三元表达式给变量赋值 result = '空' if x == None else x 2.使用lambda定义函数 add = lambda x, y: x+y