单页面应用(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. PHP之CLI模式

    转载: http://www.cnblogs.com/zcy_soft/archive/2011/12/10/2283437.html 所有的PHP发行版,不论是编译自源代码的版本还是预创建的版本,都 ...

  2. vue小问题库

    引入vue组件命名时,不用特殊标签,比如<head>,不然会按特殊标签处理

  3. 剑指offer(5)

    题目: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 解法: 一个栈专门用来存数,当需要输出数时,把所有数倒到第二个栈,当然,若此时第二个栈中已经有数了(之前倒 ...

  4. windows浏览器访问虚拟机开的rabbitmq服务，无法访问

    根据这个博主的建议 https://blog.csdn.net/csdnliuxin123524/article/details/78207427 换了一个浏览器上火狐浏览器输入“localhost: ...

  5. NIO服务器与客户端

    这里客户端没有采用NIO形式 服务器: package com.util.Server.NIO; import javax.print.DocFlavor;import java.io.IOExcep ...

  6. QTP自动化测试-笔记 注释、大小写

    1 rem 注释内容 2 ' 注释内容 3 快捷键注释-选择代码行-ctrl+M 4 ctrl+shift+同- 取消注释 大小写 qtp:对小写敏感:如果 变量.sheet页是用小写字母命名,则使用 ...

  7. js中判断数据类型的4中方法

    注意: js中数据类型有7种(number, boolean, string, null, undefined, object, Symbol(es6新增)) 原始数据类型: number, stri ...

  8. mybatis 批量查询参数语句

    在mybatis  传入数组在sql语句中进行查询 1.传入一个map集合,已或者的形式拼接数组循环 <select id="selectUserByList" parame ...

  9. LODOP设置判断后执行哪个

    LODOP的语句是普通的语句,可以通过JS判断确定要执行哪个,或通过循环循环执行一些语句.如果需要执行某些打印项在哪些条件下不打印,不需要通过代码删除打印项,类似LODOP.SET_PRINT_STY ...

  10. Windows Server 2012 添加角色时出现 failed to open runspace pool

    先把所有的Windows Server 2012的更新更新了.再来添加服务器角色.就不会再出现 The Server Manager WinRM plug-in might be corrupted ...