history路由模式

history路由模式是一种前端路由模式，它使用HTML5中的History API来实现无刷新页面的路由切换。在history模式下，URL中不会出现类似于hash路由模式中的#符号，而是使用真实的URL路径来表示不同的路由。这种模式可以让用户更好的理解当前所在的页面，也有助于SEO优化。

在history模式下，当用户点击链接或者进行前进后退操作时，浏览器会向服务器发送请求，服务器则需要返回对应的HTML文件。因此，在使用history模式时，需要特别注意服务端的配置，确保所有请求都能够正确返回对应的HTML文件，否则会出现404错误。

相关问题

hash 和 history 路由模式 监听

在 Vue 中，可以使用 `beforeEach` 方法监听路由的变化，无论是 hash 模式还是 history 模式。

假设你已经创建了一个 `router` 实例，你可以通过下面的代码监听路由的变化：

router.beforeEach((to, from, next) => {
  // to 和 from 分别是要跳转到的路由和当前的路由对象
  // next 是路由跳转的控制器，调用 next() 执行跳转，调用 next(false) 取消跳转
  console.log(`从 ${from.path} 跳转到 ${to.path}`)
  next()
})

上面的代码中，使用了 `beforeEach` 方法来监听路由的变化。这个方法接收三个参数：要跳转到的路由、当前的路由对象和路由跳转控制器。在这个方法内部，我们可以获取要跳转到的路由和当前的路由对象，并且可以通过控制器来决定是否执行路由跳转。在这个例子中，我们只是简单地在控制台中输出了要跳转到的路由和当前的路由对象。

需要注意的是，无论是 hash 模式还是 history 模式，路由对象都有 `path` 属性，可以用来获取当前路由的路径。

如果想要监听路由变化后执行一些操作，比如更新页面的标题或者发送请求获取数据等，可以在 `beforeEach` 方法中执行这些操作，然后调用 `next()` 方法执行路由跳转。如果想要取消路由跳转，可以调用 `next(false)` 方法。

vue history路由模式支持 window.onmessage吗

是的，Vue中的history路由模式是支持window.onmessage的。

无论是使用hash模式还是history模式，Vue的路由都是基于浏览器的history API实现的。而window.onmessage是浏览器提供的API，用于在不同窗口（或者不同域）之间进行消息传递。

在Vue应用中，您可以在需要接收消息的组件中监听window.onmessage事件，并在事件处理函数中处理接收到的消息。无论是使用hash模式还是history模式，这种方式都是适用的。

需要注意的是，如果您的Vue应用使用了history模式，并且在部署时配置了正确的服务器设置，使得所有路由指向同一个HTML文件（如index.html），那么您需要确保在服务器端正确处理所有路由请求，以避免因服务器重定向而导致window.onmessage无法触发。

总之，Vue的history路由模式与window.onmessage可以一起使用，您可以根据实际需求在Vue组件中进行相应的处理。