前提：
异步交互体验的更高级版本就是 SPA ,大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。
页面都是由组件组成的，只需要把组件和路径相对应起来，就能把组件渲染出来。
页面实现：在vue-router中, 它定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击的部分， 定义显示部分。
-
js中配置路由：首先要定义route,一条路由的实现，他是一个对象，由path和component组成。
const routes = [ {// 首页 path: '/', component: () => import('src/pages/home/index.vue'), }, {// 首页更多功能 path: '/functionManage', component: () => import('src/pages/home/functionManage.vue'), }, ] -
创建router对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
router.js文件中const router = new VueRouter({ routes, }) -
配置完成后，把router 实例注入到 vue 根实例中。
main.js文件中window.vm = new Vue({ router, })
执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到 标签所在的地方。
前端路由是通过改变URL，在不重新请求页面的情况下，更新页面视图。
目前在浏览器环境中这一功能的实现主要有2种:
-
利用URL中的hash；
在改变 url 的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：
http://www.xxx.com/#/login
这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：function matchAndUpdate () { // todo 匹配 hash 做 dom 更新操作 }
window.addEventListener('hashchange', matchAndUpdate)
- 利用H5中history；
14年后，因为HTML5标准发布。多了两个 API，pushState和replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。
