vue路由的两种模式有什么区别
-
Vue 路由有两种模式：hash 模式和 history 模式。
-
Hash 模式：
在 hash 模式下，URL 中会有一个 # 符号，而真正的路径则跟在 # 后面。例如：http://example.com/#/home。
使用 hash 模式的优势是兼容性好，可以在不支持 HTML5 History API 的浏览器上正常运行。同时，hash 模式不会让服务器加重负担，因为所有路由都在前端进行处理。
然而，hash 模式也有一些缺点。首先，因为 hash 符号的存在，URL 看起来比较混乱不美观，对 SEO 不友好。其次，用户每次访问都会携带相同的 hash，这会导致一些安全隐患。 -
History 模式：
在 history 模式下，URL 中不含有 # 符号，而是直接使用真实的路径。例如：http://example.com/home。
使用 history 模式的优势是 URL 更加美观，对 SEO 更友好。另外，history 模式也提供了一些方法来与浏览器历史记录进行互动，例如：通过 history.pushState 方法可以动态修改 URL 地址，而不会刷新页面。
然而，history 模式也有一些限制。首先，如果用户直接访问 history 模式的 URL，而此时服务器又没有相应的路由配置，则会返回 404 错误。为了解决这个问题，需要在服务器端进行配置。其次，在某些场景下（如刷新页面），如果没有正确配置服务器，会导致页面无法找到。
综上所述，hash 模式和 history 模式各有优势和限制。选择使用哪种模式，需要根据具体项目的需求和服务器条件来决定。
2年前 0条评论 -
-
Vue路由有两种模式，分别是hash模式和history模式。它们在URL格式和页面跳转方式上有所不同。
-
URL格式：
- hash模式：URL中有一个#符号，所有的路由都会添加在#后面。例如：http://www.example.com/#/home。
- history模式：URL中没有#符号，路由直接跟在域名后面。例如：http://www.example.com/home。
-
页面跳转方式：
- hash模式：在hash模式下，页面的跳转是通过改变URL的hash值来实现的。当页面的hash值发生变化时，浏览器并不会刷新页面，而是根据新的hash值触发相应的路由跳转。
- history模式：在history模式下，页面的跳转是通过浏览器的history.pushState()方法来实现的。这会改变浏览器的URL地址，并且触发相应的路由跳转。这种方式不会产生#号，并且可以使用浏览器的前进和后退按钮进行导航。
-
兼容性：
- hash模式：hash模式的路由在各种浏览器上都能很好的支持。
- history模式：history模式要求浏览器支持HTML5的history API，由于一些老旧的浏览器不支持该API，所以在使用history模式时需要做兼容处理。
-
配置方式：
- hash模式：使用hash模式时，只需要在创建Vue路由实例时，设置mode为'hash'即可。
- history模式：使用history模式时，需要在服务器端进行一些配置。确保所有的URL路径都指向同一个index.html文件，这样在访问不存在的路由时，服务器能够返回同一个index.html文件。
-
SEO优化：
- hash模式：由于hash模式下，URL中的hash值不会被发送到服务器端，对搜索引擎的抓取和索引不友好。
- history模式：history模式的URL更加简洁和友好，有利于搜索引擎的抓取和索引。
综上所述，hash模式和history模式在URL格式和页面跳转方式上有所区别，根据实际需求选择合适的模式来进行开发。
2年前 0条评论 -
-
Vue路由有两种模式：hash模式和history模式。它们的区别主要体现在URL的形式和对浏览器的兼容性上。
- hash模式：
hash模式使用URL的hash（#）来模拟不同的URL路径，其URL形式为http://example.com/#/path。hash的变化不会导致浏览器向服务器发送请求，只会触发前端的路由变化。在hash模式下，Vue路由会基于hashchange事件来监听URL的变化。
使用hash模式的优点包括：
- 兼容性好：hash模式无论新旧浏览器都支持，可以在没有HTML5 History API的浏览器中使用。
- 部署简单：不需要服务器端配置，只需要在index.html中引入js文件即可。
而hash模式的缺点是：
- URL不美观：带有"#/"的URL不如纯粹的路径直观和美观。
- 依赖于URL的锚点：hash模式依赖于URL中的锚点，当URL中的锚点被点击时，页面会不断刷新。
- 容易造成SEO问题：搜索引擎对于带有hash的URL的爬取和索引能力有限。
- history模式：
history模式使用HTML5的History API来改变URL，其URL形式为http://example.com/path。history模式下，Vue路由通过监听popstate事件来实现URL的变化。
使用history模式的优点包括：
- URL美观：不带有"#/"的URL路径更加直观和美观。
- 体验更好：在history模式下，URL的变化不会触发页面刷新，用户体验更加流畅。
- 不依赖锚点：不依赖于URL中的锚点，URL的变化可以被前端路由更好地处理。
但history模式的缺点是：
- 兼容性差：HTML5的History API在较老的浏览器中不支持，因此需要在服务器端进行配置，确保在任何情况下都指向同一个HTML文件。
在Vue项目中，可以通过在创建VueRouter实例时指定
mode来选择使用哪种模式。默认情况下，VueRouter使用hash模式。在使用history模式时，需要在服务端进行相应的配置，防止在刷新页面时出现404错误。2年前 0条评论 - hash模式：
