- Hash模式(默认)
URL结构: 在hash模式下,URL中会包含一个#符号,后面跟着路由的哈希值。例如,访问路径可能是这样的:http://example.com/#/home。
原理: Vue Router通过监听window.onhashchange事件来检测URL中哈希值的变化,并据此切换视图内容。由于哈希(#)后面的内容不会被发送到服务器端,因此这种模式下浏览器并不会发起新的页面请求,所有的路由导航都由前端Vue Router控制。
优点:
不需要服务器配置支持,兼容性较好,所有浏览器都支持。
能够避免因直接修改URL导致的不必要的全页刷新。
缺点:
URL带有#符号,对用户不那么友好,因为从URL中很难看出这是一个单独的页面还是页面内的一个锚点链接。
SEO方面可能存在不足,因为搜索引擎通常不会抓取#后面的内容。
2. History模式
URL结构: 在history模式下,URL看起来更像是正常的、没有哈希的URL,如http://example.com/home。
原理: Vue Router使用HTML5 History API(包括pushState、replaceState和popstate事件)来改变和监听URL。当路由发生变化时,它会改变浏览器的历史记录栈,但并不触发页面刷新。
优点:
更加符合传统的多页面应用URL结构,用户体验更好,且有利于SEO优化,因为搜索引擎可以识别并抓取这些路径作为独立的页面。
缺点:
需要服务器端的支持才能正常工作。当用户直接访问或刷新某个非首页的History模式下的URL时,服务器应该返回对应的HTML文件或者重定向到应用程序的入口点,这样Vue Router才能够正确地接管并渲染相应的组件。
总结来说,选择哪种模式取决于项目需求和环境条件,如果关注SEO和更友好的URL结构,同时愿意配置服务器以支持History模式,则应优先考虑History模式;如果希望保持良好的兼容性和简单的部署流程,而不在意URL中的#,则可以选择Hash模式。