vue路由有几种模式有什么区别 • Worktile社区

不及物动词

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

Vue 路由有三种模式：hash 模式、history 模式和 abstract 模式。

hash 模式：
在 hash 模式下，URL 中的 hash（即 "#") 符号后面的部分被当作路由的参数，可以通过监听 hashchange 事件来切换视图。
例如，URL 可能是这样的：http://example.com/#/path。这种模式在浏览器兼容性方面更好，因为 hash 符号不会被发送到服务器，所以不会影响主请求。但是，URL 中的 # 符号可能会被一些人认为是不美观的。
history 模式：
history 模式使用了 HTML5 提供的新特性，通过 pushState() 和 replaceState() 方法来改变 URL，这样可以在不重新加载页面的情况下切换视图。这种模式下，URL 是正常的路径，例如：http://example.com/path。不过，使用 history 模式需要后台配置支持，以防止刷新页面时返回 404 错误。此外，如果用户直接访问 history 模式下的 URL，可能会引起服务器返回 404 错误或者显示默认页面。
abstract 模式：
abstract 模式是在非浏览器环境中使用的，比如在 Node.js 服务器端渲染或者单元测试中。这种模式下，路由状态会被保存在内存中，不会有真实的 URL。

总结起来，hash 模式适用于浏览器兼容性要求较高且不需要美观的场景；history 模式适用于需要更友好的 URL 和更好的用户体验的场景；abstract 模式适用于非浏览器环境下使用。选择使用哪种模式，需要根据实际情况进行权衡和选择。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue 路由有三种模式：Hash 模式、History 模式和 Abstract 模式。

Hash 模式：在 URL 中添加一个 #，即 hash，用来模拟一个完整的 URL。将路由信息保存在 URL 的 hash 中，当 URL 发生变化时，仍然可以通过监听 hashchange 事件来触发路由的变化。例如，http://example.com/#/home。
- 优点：兼容性好，支持所有浏览器。
- 缺点：URL 中含有 #，不够直观，不利于 SEO。
History 模式：使用 HTML5 提供的 history API 来实现路由跳转。可以通过调用 history.pushState() 或 history.replaceState() 来改变 URL，页面不会被重新加载。
- 优点：URL 没有 #，更加直观，利于 SEO。
- 缺点：可能会导致在一些不支持 HTML5 history API 的浏览器上出现问题。
Abstract 模式：是一个在服务器端运行的 Vue 应用程序使用的模式，它与服务器的路由配置相匹配，比如在 Nuxt.js 项目中使用的模式。
- 优点：适用于服务器端渲染的场景，可以方便地进行路由匹配。
- 缺点：只适用于服务器端渲染的场景，不适合传统的前端开发。

这三种模式的区别在于如何处理 URL 变化。Hash 模式通过监听 hashchange 事件来触发路由的变化，不会导致页面刷新；History 模式使用 history API 来改变 URL，也不会导致页面刷新；Abstract 模式是在服务器端运行的，与服务器的路由配置相匹配。根据不同的需求和项目情况，选择适合的路由模式。

2年前 0条评论

worktile

Worktile官方账号

Vue路由有两种模式，分别是哈希模式（Hash Mode）和历史模式（History Mode），它们的区别主要在于URL的展示形式以及浏览器的兼容性。

哈希模式（Hash Mode）：
哈希模式是Vue路由的默认模式，在URL中使用#符号。在哈希模式下，URL的格式为：http://www.example.com/#/path。

优点：不需要服务器配置，可以直接在前端开发中使用；URL改变时，不会触发页面重载，页面不会刷新。
缺点：URL中带有#号，不够美观；无法直接定位到某个具体的URL，需要通过滚动条位置来还原。

历史模式（History Mode）：
历史模式是通过HTML5的history API来实现的，在URL中不带有#号。在历史模式下，URL的格式为：http://www.example.com/path。

优点：URL美观，更符合传统的URL风格；可以直接定位到某个具体的URL路径。
缺点：需要服务器端配置，否则刷新页面会返回404错误；URL改变时，会触发页面重载。

在Vue中，可以使用router实例的mode属性来设置路由模式。默认为哈希模式，在创建router实例时，可以通过mode属性来切换到历史模式。例如：

const router = new VueRouter({
  mode: 'history', // 设置为历史模式
  routes: [
    // 路由配置
  ]
})

需要注意的是，使用历史模式时，还需要确保服务器配置正确，以便在用户刷新页面或直接访问URL时可以正确访问到对应的页面。具体的服务器配置可以参考Vue官方文档中的相关内容。

2年前 0条评论