vue-router的两种模式：hash和history详解

vue.js是一种流行的JavaScript框架，用于构建交互式Web应用程序。Vue-router是Vue.js框架中的一个重要组件，它允许您为应用程序创建路由。在Vue-router中，有两种不同的路由模式：hash模式和history模式。本文将详细介绍这两种模式，并讨论它们之间的差异。

hash模式

在hash模式下，URL中的#符号用作路由器的路径分隔符。例如，如果要访问Vue应用程序中的/about页面，则可以使用以下URL：

http://example.com/#/about

当用户点击链接时，浏览器会自动滚动到页面顶部，并且不会向服务器发送请求。相反，浏览器仅仅修改URL中的#符号后的路径，然后通过hashchange事件通知Vue-router更新视图。

在hash模式下，您可以通过Vue-router api来动态设置和移除路由。例如，您可以使用以下代码动态添加一个新的路由：

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

router.addRoutes([{ path: '/contact', component: Contact }])

虽然hash模式非常容易实现，但它也具有一些缺点。首先，因为所有路由都在同一个页面中加载，所以初始加载可能比较慢。其次，由于#符号的存在，搜索引擎可能无法正确地索引您的网站。

history模式

在history模式下，URL中没有#符号，而是使用html5的History API来管理路由。例如，如果要访问Vue应用程序中的/about页面，则可以使用以下URL：

http://example.com/about

当用户点击链接时，浏览器将向服务器发送HTTP请求，然后返回与请求路径匹配的内容。与hash模式不同，浏览器不会滚动到页面顶部，而只是更新页面内容。

在history模式下，您还可以使用Vue-router API动态设置和移除路由。例如，您可以使用以下代码动态添加一个新的路由：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

router.addRoutes([{ path: '/contact', component: Contact }])

尽管history模式可以提供更好的用户体验和seo优化，但它也有一些限制。首先，如果在没有配置正确的服务器支持的情况下使用history模式，用户在直接访问应用程序中的特定路由时可能会遇到404错误。其次，由于浏览器缓存的存在，可能需要手动清除缓存才能查看更新后的内容。

在Vue-router中，hash模式和history模式各有优缺点。如果您的应用程序不需要SEO优化或是您希望快速启动应用程序，那么hash模式可能是最佳选择。而如果您需要SEO优化并且拥有正确的服务器支持，那么history模式可能更适合您的应用程序。最终的选择取决于您的需求和偏好。

链接: https://www.fly63.com/article/detial/12412