Vue-router(一.路由模式)

Vue-router(一.路由模式)

1.V2-V3

v2 mode history v3 :createWebHistory
vue2 mode hash vue3 createWebHashHistory
vue2 mode abstact vue3 createMemoryHistory

2.HashHistory原理

location.hash去匹配 ：路径 //location.hash = ‘/路径’
监听浏览器左右箭头原理：通过window.addEventListener(‘hashchange’,(event)=>console.log(event))去监听左右箭头的变化

3.createWebHistory原理

没有/#路径
基于H5 history去实现

监听箭头：通过window.addEventListener(‘popstate’,()=>)
跳转：history.pushState({state:1},’ ‘,’/ccc’) 对象/title/路径（跳转后不会被监听到，手动刷新或者调用vue内置push方法）