前端路由
看到这里可能有朋友有疑惑了，前端也有路由吗？这些难道不应该是在后端部分操作的吗？确实是这样，但是现在前后端分离后，加上现在的前端框架的实用性，为的就是均衡前后端的工作量，所以在前端也有了路由，减轻了服务器对这方面的判断，在前端做好路由分发之后，后端就只需要写API接口了，更着重于数据交互，逻辑上的代码编写了
单页面应用
那么，既然有前端路由，每个路由是不是都要单写一个页面呢？不需要的，现在都提倡单页面应用
什么是单页面应用呢
单页面应用，即 single page application ，简称SPA ，所有的路由其实都只在一个页面上完成，这种就叫单页面应用，我们不需要每个路由对应一个页面去编写
为什么要用单页面应用
1.传统的根据路由切换页面，都是立即切换，如果切换的网络资源很多的话，加载需要很久，用户体验很不好，并且写的页面越多，也越不好管理，可能还会有很多重复的代码出现，到后期更新迭代后，页面越来越多，这样会产生更多的资源
2.SPA可以完美解决以上的问题，并且数据切换时只是局部切换，且并不会立即切换，而是在某个合适的时间用ajax异步请求后端的API接口，再加载出数据，这里的【某个合适的时间】是指：因为用户查看网页的时候并不会永远都在切换页面吧？所以在某个刚好的时间切换就行了
单页面应用的原理
原理就是运用了锚点，即html页面上的id属性，因为id用的符号【#】，根据前面的web前端基础开发，相信你已经可以理解了，比如一个页面右边的固定按钮，返回顶部，比如这里淘宝的页面，这个返回顶部的按钮
用的就是【#】，这个就不多介绍了，因为学到vue这里，前面说过的，你得有钱端的基础知识才更容易学。在js里【#】其实是hash值，比如这个例子：
因为js自带有location对象，在我点击登录时，因为用onhashchange监听了hash改变，所以立马可以得到新的hash值，然后按逻辑把数据渲染出来
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<a href='#/login'>登录</a>
<a href="#/register">注册</a>
<div >
</div>
<!-- <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script> -->
<script>
var point = document.getElementById('app');
window.onhashchange = function () {
console.log(location);
switch (location.hash) {
case '#/login':
point.innerHTML = '<h2>登录</h2>'
break;
case '#/register':
point.innerHTML = '<h2>注册</h2>'
break;
default:
break;
}
}
</script>
</body>
</html>