hash和history路由模式的区别

路由模式和历史模式是Vue.js的两种不同的路由方式。

路由模式使用哈希值（#）在URL中标记路由信息，例如：http://www.example.com/#/home。这种方式在浏览器中也会被称为锚点（Anchor）。使用路由模式时，路由信息会被始终保留在URL的#后面，因此不会影响浏览器发送请求到服务器的时候，服务器可以正常解析URL。

历史模式使用HTML5的history API，其不同之处是路由信息不再使用#号，而是直接标记在URL上，例如：http://www.example.com/home。这种方式是基于HTML5的新特性实现的，需要浏览器支持才能使用。与路由模式相比，历史模式在URL上的标记更加有语义化，使得URL更加直观和易读。

总之，两种路由方式都可以实现相同的功能，具体使用哪种取决于实际需求和浏览器环境。

相关问题

路由的hash和history模式的区别

路由的Hash模式和History模式，主要区别在于URL的表现方式。Hash模式将URL中的#号后面的内容作为路由路径的一部分，而页面不会刷新。而History模式则将路由信息以正常的URL形式展现，不含#号，但每次路由切换页面都会刷新。

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)` 方法。