Vue-Router 其实就是一个路由的功能，我们现在做前端 WebApp，路由是一个必不可缺的功能。
因为我们做 WebApp 其实相对于以前老的网站开发来讲，我们在输入一个链接之后，然后跳转到后端进行一个模板渲染，产生一个新的 html，然后返回给浏览器端，最后浏览器再把这个内容显示出来，这是一次路由跳转。
那么作为单页应用来说，我们的页面跳转，肯定是不经过后端服务器的，那么我们页面渲染的内容，全部是来自于JavaScript。
既然我们的路由跳转是前端去做，我们肯定要有一个称职合理的工具，来帮我们去更好的处理前端路由。
现在来说，每个前端框架都会配备一个路由的工具，像 Vue 使用的就是 Vue-Router。
这些工具，在前端的单页应用开发里面，都会变的越来越重要。那么我们接下去就直接进入正题。
首先，我们先把路由部署起来：
在 router 目录下，创建2个 js 文件：index.js 和 routes.js。
大家这里肯定会有个疑问，为什么我们要分开做呢？
因为在我们项目变的更庞大之后，我们的路由配置可能会非常的多。那么我们希望单独的去配置一个，跟路由映射关系的文件 routes.js。
然后 index.js 这个文件主要是 router 的一些设置还有它里面的一些内容。
首先，我们先把路由映射的关系给列好，我们在 routes.js 里面开始配置：
这就是路由最基础的一个配置。
第二步，我们在 index.js 里面配置，最后是要把一个 router 的对象给它 export 出去。
在这里我们要注意一个点：就是我们最好不要直接 new Router()
其实上面这种写法，正常来说就可以用了，我们一直用的也都是这种写法。但是呢，我们是不推荐在这里面直接 export 一个 router。
因为如果我们这么 export 的话，我们在全局每个地方去 import 的 router，它都是同一个 router。
如果我们有需要每次 import 的时候，都去创建一个新的 router，那我们就做不到了。所以我们会怎么去做呢？
那么我们大家肯定会有疑惑，就是为什么我们要这么去做？
因为我们的项目，如果需要用到服务端渲染的时候，我们这个文件只是 export router，就会导致我们在服务端渲染的时候，出现一个内存溢出的问题。
最主要的原因就是：我们这个 export 出去的都是这一个 router，那么每一次服务端渲染，都会重新去生成一个新的 app，然后我们的 router 又只有一个对象，所以它就会缓存我们每次新建的这个 app，导致我们这个服务端渲染流程结束之后，这个 app 的对象它没有去释放掉，因此就会导致内存不会下降，一直往上加，然后就导致内存溢出，所以这就是我们需要这么去做的原因。
那么我们启动项目之后，发现 vue-router 自动使用了 hash 路由，给我们设置了默认的形式。
我们其实配置的路由只有 hello 和 login，那么为什么页面上面会显示所有的页面呢？
因为我们要在 path 是 /app 或者 /login 的时候，它才会把对应的组件给显示出来。
然而我们发现，它还是这样一个页面。那么这是为什么呢？
因为在 App.vue 里面，它其实就是长这个样子，它没有去配置一个路由相关的东西，这就导致我们无论跳到哪个路由，它显示的还是这个页面。
如果我们要进行一个变化，那么该怎么做呢？
我们需要用到 vue-router 的一个内置组件：<router-view />
到这一步，我们的整个 vue-router 其实才算是真正的配置成功。
然后我们要去修改下路由配置，给它加一个默认路由的跳转，那么怎么去做呢？
其实就是 redirect。（ path: '/' 就是默认路由）
这样的意思，就是我们进到页面之后，如果 vue-router 发现我们的路由是默认路由时，那么它会自动跳转到 '/hello'。如下图：
我们从默认路由按下回车，它就自动变成 /hello 了。
然后，一般作为有服务端渲染的应用，我们肯定希望这个应用的路由不是 hash 这个样子的，而是正常没有 # 号的路由。
而 hash 很多时候是用来做一个定位的，而不是用来做路由状态的一个记录。
而且同时 hash 路由是不会被搜索引擎所解析的，就会导致我们网站的 SEO 情况变的非常不好，那么我们应该要怎么修改呢？
我们可以看到，后面没有 # 号了。这就是一个 history 的路由形式。
