在介绍前端路由之前，我们先了解一下最开始路由的起源——后端路由。
http://www.xxx.com/index
当我们在浏览器中访问这个网址时，大致会有以下的访问流程：
1、浏览器发出请求
2、服务器端的相应端口(例如：80)，监听用户的请求
3、服务器端根据请求，分析请求的URL，并返回相应的数据
4、最后用户浏览器根据返回的Content-Type解析数据
那么所谓的后端路由实际上就是用户通过不同的url路径去访问不同的后端数据资源，所以在大多数的页面访问时，都是通过后端路由的方式实现页面的切换，但这样有一个不足之处:假定一个页面中，只有小部分的数据或者区域需要访问服务器更新时，如果使用后端路由，那将大大增加访问服务器的次数，这也是完全没有必要的，所以我们聪明的程序员就专研解决办法，于是就产生了一个全新的概念——前端路由
前端路由就是不发送http请求，而是在前端切换局部页面，从而减少了访问后端服务器的次数。
前端路由这么好，那我们应该怎么样实现呢？
在实现前端路由之前，我们先来剖析一下URL的结构：
以上是百度百科给出的解释，我们重点看看“#fragment”部分，fragment被称为信息片段，在一些地方也被称为锚点。我们可以这样理解它的作用：假如我是一个很爱看书的人，但是大家都知道，书一般都有很多页，几百页到几千页不等，当我看到中途时，肚子饿了，那肯定是需要去吃饭的吧？但像我这种人，又会担心会不会风一吹，把我才看的书页数吹乱了，万一记性也不好，那肯定就不知道看到哪里来了，然后还要慢慢地找到之前看到的页数，极其麻烦，这时，聪明的我终于想到了，可以用书签，这样再也不用担心这个问题了，放心大胆地去吃饭了。
那这和“#fragment”有什么关系呢？当然有关系。现在随着互联网的发展，很多页面内容非常多，结构也尤为复杂。例如一个网站上面有很多的名词，而名词的解释一般放在了一些特殊的地方，从而增强用户的阅读感，但用户有可能找不到这个地方，因此为了方便，我们就可以在每一个名词上加上锚点，这样只需要用户一点击名词，就可以自动地跳到相应的名称解释，所以锚点充当的角色就是帮助我们记录页面局部的位置。
在http请求中，锚点部分并不会被服务器响应，因此当锚点改变时，浏览器不会发送新的http请求。当锚点改变时，会自动触发window.onhashchange事件，而且可以通过location.hash来获取锚点部分改变的内容，那我们就可以通过URL的hash方式来实现前端的路由。
现在我们在实现如下功能：
这个淘宝商品详情的一个小功能模块，点击切换，但并不会发送http请求，而是局部更新，现在我们通过vue和锚点来实现。
首先我们在html部分写好静态页面结构：
<div id="app">
<ul>
<li>
<a href="#/detail">宝贝详情</a>
</li>
<li>
<a href="#/comment">累计评论</a>
</li>
<li>
<a href="#/server">专享服务</a>
</li>
</ul>
<component :is="comName"></component>
</div>
注意这里的component标签是vue专门提供用来为组件站位的，“is”属性是指定为哪个组件占位，这里我指定了一个变量，用于动态地变换.
然后创建三个自定义组件，用于当做切换的内容区：
const detail = {
template: '<div>宝贝详情</div>'
}
const comment = {
template: '<div>累计评论</div>'
}
const server = {
template: '<div>专享服务</div>'
}
接着我们在vue的components中注册这些组件：
var vm = new Vue({
el: '#app',
data: {
comName: "detail"
},
components: {
detail,
comment,
server
},
methods: {
}
});
我们把之前占位组件的指定变量初始化指向第一个组件的名称，这样就初始化好了。但还没有完，还有最关键的一步，那就是根据锚点动态地改变占位组件的指向：
window.onhashchange = function () {
switch (location.hash.slice(1)){
case '/detail':
vm.comName = 'detail'
break;
case '/comment':
vm.comName = 'comment'
break;
case '/server':
vm.comName = 'server'
break;
}
}
是通过window.onhashchange来监听URL中锚点的改变，只要锚点内容改变，就会触发这个事件，然后模拟路由，动态地改变占位组件的指向变量值，从而实现相应的效果，现在我们来看看能否实现:
虽然界面丑了一点，但是效果已经出现了，大功完成。
