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的路由hash模式和 history模式的区别

Vue的路由hash模式和history模式的区别：

- Hash模式：路由路径中以“#”作为分隔符，#后面的内容为url的hash值。在url变化时，不会向服务器发送请求，只会在浏览器历史记录中添加一条记录，可以通过监听hashchange事件来进行前端路由跳转。

- History模式：路由路径中不带“#”，使用HTML5里的History API进行url的变化，变化时会向服务器发送请求，需要后端的支持，可以通过前端路由的pushState和replaceState等API来进行路由跳转。

总结来说，Hash模式可以兼容各种浏览器，并且不需要后端的支持；而History模式可以实现更加真实的url路径显示，但需要后端的支持。

hash模式和history模式的区别

hash模式和history模式是前端路由的两种实现方式。

hash模式是指URL中以#号开头的部分，例如：http://www.example.com/#/home。在hash模式下，当URL中的hash值发生变化时，浏览器不会向服务器发送请求，而是通过监听hashchange事件来更新页面内容。

history模式是指URL中不包含#号的部分，例如：http://www.example.com/home。在history模式下，当URL发生变化时，浏览器会向服务器发送请求，服务器会返回对应的页面内容。

因此，hash模式相对于history模式来说，具有更快的页面切换速度和更好的用户体验，但是不利于SEO优化。而history模式则可以更好地支持SEO优化，但是需要服务器端的支持。