vue实际开发用什么路由模式 • Worktile社区

worktile

Worktile官方账号

Vue 实际开发中经常使用的路由模式有两种：hash 模式和 history 模式。

Hash 模式：
Hash 模式是 Vue 默认的路由模式。在 hash 模式下，URL 中的 hash （#）符号表示路由的路径，而不会导致页面重新加载。例如，URL 可以是：http://example.com/#/home。Vue Router 会监听 URL 中 hash 的变化，根据 hash 值匹配对应的组件并渲染到页面中相应的位置。通过修改 URL 的 hash 值，可以实现前端路由的切换。使用 hash 模式的好处是兼容性较好，可以在不支持 HTML5 History API 的浏览器中使用。
History 模式：
History 模式是基于 HTML5 History API 的路由模式。在 history 模式下，URL 中的路径部分表示路由的路径，不再需要 hash 符号。例如，URL 可以是：http://example.com/home。Vue Router 会使用 HTML5 History API 通过 pushState() 方法来改变 URL，而不会导致页面重新加载。通过修改 URL 的路径部分，可以实现前端路由的切换。使用 history 模式的好处是 URL 更加美观，不带有冗余字符。然而，需要注意的是，使用 history 模式时，需要在后端服务器进行相应的配置，以确保在刷新页面或直接访问某个路由时能正确加载对应的页面。

根据项目的具体需求和实际情况，选择适合的路由模式。如果需要兼容性好且不需要进行特殊配置的话，可以使用 hash 模式。如果需要更美观的 URL，可以使用 history 模式，但需要进行相应的服务器配置。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue实际开发中，常用的路由模式有两种：哈希模式和历史模式。

哈希模式（Hash Mode）：
哈希模式使用URL的哈希值来实现路由的切换。在使用哈希模式时，URL中会加入一个#符号，将路由信息添加到URL的哈希值中。这种模式的优点是兼容性较好，不需要服务器端的特殊配置，可以直接在前端实现路由切换。但缺点是URL中存在#符号，不够美观。
历史模式（History Mode）：
历史模式使用HTML5提供的history API来实现路由的切换。在使用历史模式时，URL不会有#符号，而是使用正常的URL路径来表示路由信息。这种模式的优点是URL更加美观，没有#符号的干扰；缺点是需要服务器端配置支持，在某些情况下可能会出现404错误。
路由模式配置：
在Vue中配置路由模式非常简单，只需在路由的创建时指定mode参数即可。

const router = new VueRouter({
  mode: 'hash', // 使用哈希模式
  // mode: 'history', // 使用历史模式
  routes: [
    // 路由配置
  ]
})

路由模式选择：
在选择路由模式时，可以考虑以下因素：

兼容性：哈希模式的兼容性较好，可以在不同类型的服务器上运行。如果需要考虑兼容性，则可以选择哈希模式。
美观性：如果对URL的美观性有要求，可以选择历史模式。
服务器配置：使用历史模式需要服务器端支持。如果无法在服务器上进行配置，则可以选择哈希模式。
SEO优化：历史模式对搜索引擎的支持更好，可以更好地进行SEO优化。

总结：
根据实际需求，选择合适的路由模式很重要。如果无特殊要求，哈希模式是最简单且常用的方式；如果对URL的美观性有要求或需要进行SEO优化，则可以选择历史模式。

1年前 0条评论

不及物动词

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

在Vue实际开发中，我们可以选择使用两种不同的路由模式，分别是 Hash 模式和 History 模式。

Hash 模式：
Hash 模式使用 URL 的 hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载，而是通过监听 hash 的变化来切换视图。在实际开发中，我们可以通过在路由配置中设置 mode 为 "hash" 来使用 Hash 模式。

使用 Hash 模式的步骤：
1）导入 VueRouter，并使用 Vue.use() 安装插件。
2）创建路由实例，并配置路由映射关系。
3）在 Vue 实例中，通过 router 配置项将路由实例注入到 Vue 实例中。
4）在页面中使用组件和组件进行导航和展示。

History 模式：
History 模式使用新的 HTML5 history API（pushState、replaceState 和 popstate）来实现无需改变 URL hash 的方式切换视图。在实际开发中，我们可以通过在路由配置中设置 mode 为 "history" 来使用 History 模式。

使用 History 模式的步骤：
1）导入 VueRouter，并使用 Vue.use() 安装插件。
2）创建路由实例，并配置路由映射关系。
3）在 Vue 实例中，通过 router 配置项将路由实例注入到 Vue 实例中。
4）在服务端配置 HTTP 服务器，将所有路径都重定向到 index.html，确保在刷新页面时能够正确加载路由配置。

需要注意的是，使用 History 模式时，如果你的前端应用是部署在一个子目录下的话，你就需要设置一个基础路径（base），通常设置为部署的子路径。

根据实际情况，我们可以灵活选择不同的路由模式。一般来说，如果你的项目是一个单页应用，并且需要支持在 IE9 或更低版本的浏览器中使用，则推荐使用 Hash 模式。如果你的项目是一个多页应用，并且只需要支持现代浏览器，则可以考虑使用 History 模式。

1年前 0条评论