vue-router原理

前提：

异步交互体验的更高级版本就是 SPA ,大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。

页面都是由组件组成的，只需要把组件和路径相对应起来，就能把组件渲染出来。

1. 页面实现：在vue-router中, 它定义了两个标签 和来对应点击和显示部分。 就是定义页面中点击的部分， 定义显示部分。

2. js中配置路由：首先要定义route,一条路由的实现，他是一个对象，由path和component组成。

    const routes = [
    {// 首页
    path: '/',
    component: () => import('src/pages/home/index.vue'),
    },
    {// 首页更多功能
    path: '/functionManage',
    component: () => import('src/pages/home/functionManage.vue'),
    },
     ]
   

3. 创建router对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
   router.js文件中

    const router = new VueRouter({
    routes,
      })
   

4. 配置完成后，把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 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

https://github.com/muwoo/blogs/issues/24