学习并实现一版简易的vue-router
。
如何在没有vue-router
等路由组件的情况下开发SPA?
简单来说,路由就是用来和后端服务器进行交互的一种方式,通过不同的路径,请求不同的资源,请求不同的页面是路由的其中一种功能。
类似于htttp://blog.careteen.wang/#/login
,#
后面为hash
部分,hash
值变化,不会刷新页面,也就是浏览器不会向服务端发送请求,但会触发hashchange
事件,通过监听这个事件,可以根据不同hash
渲染不同视图。
由H5的APIpushState
和replaceState
去改变url
但不会刷新页面,会触发popState
事件,和hash
模式原理一样,只是url更加美观,少了#
,但是当用户刷新页面时,浏览器会向服务端发送请求,所以需要后端配置所有页面都重定向到根页面。
Vue
?hash
和history
模式?router-view
和router-link
组件?$route
即当前路由信息和$router
即操作路由的方法。beforeRouteLeave
beforeEach
守卫beforeRouteUpdate
守卫beforeEnter
守卫beforeRouteEnter
守卫beforeResolve
守卫afterEach
守卫DOM
更新beforeRouteEnter
守卫中传给next
的回调函数Vue
实例上VueRouter
对象install
Matcher
createMatcher
提供pathList/pathMap/nameMap
pathMap
存放路径和组件相关信息match
:根据新老路径匹配为transitionTo
做铺垫transitionTo
路径切换koa
中间件原理一样)url
变化router-view
router-view
渲染的组件depth
确定嵌套的深度router-link