单页面应用(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. BOM、DOM

    window对象 所有浏览器都支持window对象,他表示浏览器窗口. 全局变量是window对象的属性.全局函数是window对象的方法. window的常用方法: window.innerHeig ...

  2. 【翻译】asp.net core2.1认证和授权解密

    asp.net core2.1认证和授权解密 本篇文章翻译自:https://digitalmccullough.com/posts/aspnetcore-auth-system-demystifie ...

  3. [转帖]linux 清空history以及记录原理

    linux 清空history以及记录原理 自己的linux 里面总是一堆 乱七八槽输错的命令 用这个办法 可以清空 linux的内容. 清爽一些. 1.当前session执行的命令,放置缓存中,执行 ...

  4. python爬虫scrapy之rules的基本使用

    Link Extractors Link Extractors 是那些目的仅仅是从网页(scrapy.http.Response 对象)中抽取最终将会被follow链接的对象｡ Scrapy默认提供2 ...

  5. java学习之—数组的曾删改查

    /** * 数组的曾删改查 * Create by Administrator * 2018/6/8 0008 * 上午 9:54 **/ public class HighArray { priva ...

  6. 安装VC++2015运行库时出现0x80240037错误

    很多时候,当我们将开发好的软件部署到用户的机器上时总会出现各种意想不到的错误,最近在一台原版Windows7系统的电脑上安装VC++运行库的时候,莫名的出现安装失败,然后错误代码为:0x8024003 ...

  7. python之类和__init__

    构建一个商品类,__init__函数类似于构造方法,self类似于this import random class Goods: def __init__(self, name, price): se ...

  8. MySQL——基础操作

    参考博客:http://www.cnblogs.com/wupeiqi/articles/5713315.html 1.创建用户.授权(默认root,密码为空) 创建: create user 'al ...

  9. vue axios 封装（三）

    封装三: import axios from 'axios' import { Message, MessageBox } from 'element-ui' import store from '. ...

  10. How to enable mp3 on Ubuntu

    apt install gstreamer1.0 libavcodec57