vue路由的两种模式hash与history原理
Vue路由有两种模式:哈希模式(hash mode)和历史模式(history mode)。
1. 哈希模式(hash mode):
该模式下的路由实现原理:
当使用VueRouter创建路由实例时,如果不指定`mode`,则默认为哈希模式。
当切换路由时,VueRouter会监听锚点的变化,并根据变化的锚点到对应的路由配置信息,然后根据路由配置信息更新组件的显示。
优点:
-实现简单,不依赖于服务器配置。
-兼容性好,支持所有主流浏览器。
缺点:
-URL中夹杂着`#`,对于SEO不友好。
-URL不太美观。
2. 历史模式(history mode):
该模式下的路由实现原理:
设在`mode`为`history`时,VueRouter会使用HTML5的History API。
在页面加载时,VueRouter会根据当前URL的路径到对应的路由配置信息,并渲染对应的组件。
当切换路由时,VueRouter会通过History API将新的URL地址添加到浏览器的历史记录中,并根据新的URL重新加载组件。
优点:
-URL美观,没有`#`。
-react router的优点
内置浏览器前进后退功能,用户体验好。
-与传统的后端路由更为一致。
缺点:
-需要服务器配置,以避免路由不到后返回404
- 兼容性较差,部分旧版本浏览器不支持History API。
在选择路由模式时,一般建议使用历史模式,因为它能提供更好的用户体验和SEO优化。但在实际开发中,需要根据项目的具体需求和目标平台来选择合适的路由模式。比如,如果需要考虑兼容性,可以选择哈希模式;如果需要考虑SEO,可以选择历史模式。