vue.js - 在 vue-router 中静默更新 url 而不触发路由

Question

我需要更新 url 的哈希值，而不实际触发 vue-router 转到该路由。类似的东西:

router.replace('my/new/path', {silent:true})

这会将 url 更新为 .../#/my/new/path，但路由器本身不会路由到该路径。

是否有一种优雅的方式来实现这一点？

Answer 1

无需重新加载页面或刷新 DOM，history.pushState可以胜任这项工作。

例如:在您的组件或其他地方添加此方法来执行此操作:

addHashToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path + '#' + encodeURIComponent(params)
  )
}

然后您可以在组件的任何位置调用 addHashToLocation('/my/new/path') 将查询参数推送到 window.history 堆栈。

要将查询参数添加到当前位置而不推送新的历史记录 条目，请使用 history.replaceState相反。

应该与 Vue 2.6.10 和 Nuxt 2.8.1 一起使用。小心使用此方法，如Vue Router不知道 URL 已更改。