vue-router有什么模式和区别 • Worktile社区

worktile

Worktile官方账号

vue-router可以有两种不同的模式：hash模式和history模式。

hash模式：URL中的hash符号（“#”）被用来表示页面的状态，URL的结构为base_url/#/path。在这种模式下，页面的跳转不会导致页面的刷新，所有的路由变化只是在URL中发生。hash模式的优点是兼容性较好，可以在不支持HTML5的浏览器中正常工作。但是，URL中含有hash符号，不够美观。
history模式：利用HTML5的History API来实现，URL的结构为base_url/path。这种模式下，当路由发生变化时，浏览器的URL会发生变化，但是页面不会刷新，所有的变化都是在前端实现的。history模式的优点是URL更加美观，没有hash符号，相对更加直观。但是需要服务器的支持，需要进行URL重定向或者配置404页面。

两种模式的区别点如下：

URL结构：hash模式中URL中有hash符号，而history模式中URL中没有hash符号。
兼容性：hash模式兼容性较好，可以在不支持HTML5的浏览器中正常工作；而history模式需要HTML5的History API支持，可能在一些旧版本的浏览器中不兼容。
美观性：history模式的URL更加美观，没有hash符号，相对更加直观；而hash模式的URL中带有hash符号，相对不够美观。

根据实际需求和项目环境的不同，可以选择适合的模式来使用vue-router。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。Vue Router 提供了多种模式和区别来满足不同的开发需求。

Hash 模式：
Hash 模式是 Vue Router 默认采用的模式。在 URL 中会以 # 符号表示路由，比如 http://example.com/#/home。Hash 模式的好处是兼容性好，可以在不同浏览器之间正常工作，也可以在不同的服务器配置情况下正常运行。它的缺点是 URL 中会出现 # 符号，不太美观，并且不利于 SEO（搜索引擎优化）。
History 模式：
History 模式通过 HTML5 提供的 history.pushState() 和 history.replaceState() 方法来实现。在 URL 中不会出现 # 符号，比如 http://example.com/home。使用 History 模式需要后台服务器的支持，需要配置一些规则来确保在刷新页面时能够正确出现对应的页面内容。History 模式的好处是 URL 更加美观，没有 # 符号，利于 SEO，但兼容性稍差，无法在不同浏览器和服务器配置情况下正常工作。
区别：
- URL 美观度：Hash 模式的 URL 中会出现 # 符号，而 History 模式没有 # 符号，URL 更加美观。
- SEO 优化：由于 Hash 模式下，URL 中的内容不被搜索引擎所解析，所以在 SEO 优化上不利。而 History 模式下的 URL 可以被搜索引擎直接解析，有利于 SEO 优化。
- 兼容性：Hash 模式的兼容性更好，可以在不同浏览器和服务器配置情况下正常工作。而 History 模式需要后台服务器的支持，在不同浏览器和服务器配置情况下可能会出现问题。
- 刷新页面时的处理：Hash 模式下，刷新页面不会向服务器发送请求，可以正常加载对应页面。而 History 模式下，刷新页面会向服务器发送请求，需要后台服务器的支持来返回正确的页面内容。
- URL 的处理方式：Hash 模式通过监听 URL 的变化，根据 # 后面的内容来匹配路由。而 History 模式通过监听 popstate 事件，根据 URL 的路径来匹配路由。

除了以上两种模式之外，Vue Router 还支持嵌套路由、动态路由、路由懒加载、过渡效果等功能，可以根据项目需求选择合适的模式和功能来进行开发。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue Router是Vue.js官方提供的一个路由管理插件，它可以帮助我们在Vue.js应用中实现页面的跳转和切换效果。Vue Router支持多种不同的路由模式，包括hash模式和history模式，并且它们之间有一些区别。

hash模式：
在hash模式下，URL中的hash符号（“#”）被用来作为路由的标记，即路由路径会被加上一个“#”号，比如：http://example.com/#/home。这种模式的好处是实现起来简单，需要部署到的服务器对路由没有要求。当浏览器接收到带有hash的URL时，只会重新渲染页面中的hash部分。另外，hash模式还可以实现前端的页面跳转和后端的路由跳转之间的无缝切换。

hash模式在Vue Router中是默认的模式，可以通过在Vue Router的配置中指定mode属性为‘hash’来启用。
```
const router = new VueRouter({
  mode: 'hash',
  // other options
});
```
使用hash模式时，可以在路由配置中使用“#/”来定义路由路径。
history模式：
在history模式下，URL中没有使用hash符号来作为路由的标记，即路由路径没有“#”号，比如：http://example.com/home。这种模式需要服务器的支持，因为URL中没有hash部分，当浏览器接收到这样的URL时，会发送一个请求给服务器，然后服务器根据实际的后端路由返回对应的页面。与hash模式相比，history模式的URL更加美观，但需要服务器的支持。

在Vue Router中启用history模式，可以通过在Vue Router的配置中指定mode属性为‘history’来实现。
```
const router = new VueRouter({
  mode: 'history',
  // other options
});
```
在使用history模式时，需要在服务器配置中指定一个fallback选项，用来处理当URL路径没有匹配到任何静态资源时的情况。
区别：
- URL格式不同：hash模式在URL中使用“#”来作为路由的标记，而history模式没有使用“#”，URL更加美观。
- 页面刷新处理：hash模式刷新页面时，浏览器会只重新渲染hash部分，不会发送请求给服务器；而history模式刷新页面时，会发送一个请求给服务器，需要服务器的支持。
- 服务器要求：hash模式不需要服务器的特殊配置，可以部署到任意静态资源服务器上；而history模式需要服务器配置来处理页面跳转。
- 兼容性：hash模式兼容性良好，可以在所有现代浏览器中使用；history模式在一些旧的浏览器中不兼容，需要考虑兼容性问题。

以上就是Vue Router的两种模式(hash模式和history模式)的情况和区别。根据项目的需求和服务器的配置情况，可以选择适合的模式。

1年前 0条评论