vue-router 单页面实现原理

1. hash 模式，也是加#的这种路由，不需要服务端配合；

hash值的变化并不会去服务端请求刷新页面，并且会触发hashchange事件，从未更具路由值渲染不同显示模块；

function matchAndUpdate(){

  // todo 匹配 hash 做 dom 更新操作

}

window.addEventListener('hashchange', matchAndUpdate)

2.history模式：

h5新增了pushState 和 replaceStat两个 API ，可以改变 url 地址且不会发送请求，并且不带#，看着更合理，但是当用户刷新页面之类的操作时，由于是服务器可识别的路由，就去去找相应的自身的资源请求，为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate(){

  // todo 匹配路径 做 dom 更新操作

}

window.addEventListener('popstate', matchAndUpdate)

3.vue中引用vue-router

import VueRouter from'vue-router'

Vue.use(VueRouter)

constrouter =new VueRouter({

    mode:'history',

    routes: [...]

})

newVue({ 

 router 

 ...

})

要去自己去试试写写功能哦~就懂个概念是完全不够哦~先攒着~去看看vue-router源码哦~一定要去看哦~