前端路由原理本质就是监听 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新。目前单页面使用的路由就只有两种实现方式
hash
history
就是 ,当后面的哈希值发生变化时,不会向服务器请求数据,可以通过 事件来监听到 的变化,从而进行跳转页面。
实现源码(完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/hash.js#L22-L54):
检测到 的变化后,就可以通过替换的方式来实现页面的更换。
模式是 新推出的功能,比之 更加美观
两个 ,和可以改变 地址且不会发送请求,还有事件。但因为没有 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。具体可以访问官网:https://router.vuejs.org/zh/guide/essentials/history-mode.html
实现源码(完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/html5.js)
领取专属 10元无门槛券
私享最新 技术干货