vue-router 实现原理

一、vue-router是什么

　　通过改变URL,在不重新请求页面的情况下，更新页面视图

二、vue-router两种模式

　　更新视图但不请求页面，是前端路由原理的核心之一。目前在浏览器中，实现这一点主要有两种方式：

　　1.hash 模式（默认）

　　2.history 模式 

　　两种模式根据mode参数来决定选择哪一种

在vue项目中，我们设置路由模式代码如下：

const router = new VueRouter({
  //mode: 'hash', //默认 
  mode: 'history',
  routes
})

三、vue-router 中 hash 路由模式实现原理

　　1.hash模式的实现是基于location.hash来实现的。location.hash的值 就是URL 中# 后面的内容作为路径

　　2. 我们可以通过a标签，并设置href属性，当用户点击a标签后，URL的hash值会发生改变；或者通过js对location.hash 进行赋值，改变URL的hash值。

　　2.hash 值的改变，会在浏览器的历史访问记录中增加一个记录。因此我们可以通过浏览器的前进、后退按钮控制hash的改变

　　3.改变hash不会重新加载页面，但会触发hashchange 事件

　　4.监听hashchange事件，在该事件中记录当前的路由地址（loation.hash.slice(1)）

　　5.根据当前的路由地址找到对应的组件进行渲染

四、vue-router 中 history 路由模式实现原理

　　1.history模式是通过HTML5提供的history.pushState()和 history.replaceState() 这两个API来实现的，这两个API可以在不进行页面刷新的情况下，操作浏览器的历史记录。

　　　　window.history.pushState(sateObject,title,url)

　　　　window.history.replcatState(sateObject,title,url)

　　　　stateObject: 状态对象，主要用户popstate事件。当该事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以设置null

　　　　title: 大多数浏览器不支持或者忽略这个参数，最好用null代替

　　　　url:  添加记录的URL

　　2. 浏览器前进或者后退通过 window.onpopostate来监听

　　3.监听popstate 事件，在该事件中通过location.pathname拿到当前路由地址，通过event.state 拿到push进来的sateObject。并找到对应组件进行渲染

// 监听浏览器前进后退
window.onpopstate = (event) =>{
      console.log(event.state,location.pathname)
}

　　4.history.pushState()或history.replcaeState不会触发popstate事件，所以需要我们手动触发页面跳转

 五、路由两种模式的区别

• hash模式（默认）， 如 http://abc.com/#/user/10
• H5 history 模式，如：http://abc.com/user/10
• history 模式需要服务端的支持，而 hash模式不需要服务端支持，因此无特殊需求可选择前者　　

const router = new VueRouter({
        mode:'history',
        routes:[
        
        ]
})

六、路由配置--懒加载或者说是异步加载　

通过 () => import(/*webpackChunkName:'navigator'*/, './../components/Navigator') 方式来实现

import Vue from 'vue'
import Router from 'vue-router'

export default new Router({
     routes:[
           {
                    path:'/',
                   component: ()=> import(/*wepackChunkName: 'navigator'*/  './../components/Navigator')
           }
     ]
})

七、路由配置-- 动态路由