时间戳

首页 > 解决方案 > 在 vue-router 中静默更新 url 而不会触发路由

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

问题描述

我需要更新 url 的哈希，而不是实际触发 vue-router 去那个路由。类似的东西：

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

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

有没有一种优雅的方式来实现这一目标？

标签： vue.jsvue-router

解决方案

无需重新加载页面或刷新 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 发生了变化，所以 pushState 后没有反映 url。

推荐阅读