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

Question

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

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

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

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

原文由 Rinux 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 路由器要么打开要么关闭，所以你不能“让它不检测某些 url”。也就是说，如果 Vue 不需要销毁组件并允许您为 url 起别名，它会重用组件。这允许您将 iframe 应用程序中的 url 作为路径中的别名，并在此期间保持相同的组件处于活动状态，从而防止您的 iframe 重新加载。

 // router.js
import Comp1 from "./components/Comp1";
import Comp2 from "./components/Comp2";

export default [
  {
    path: "/route1",
    component: Comp1,
    alias: ["/route2", "/route3", "/route4"]
  },
  {
    path: "/otherroute",
    component: Comp2
  }
];

 // main.js
import Vue from "vue";
import App from "./App";
import VueRouter from "vue-router";
import routes from "./router";

Vue.config.productionTip = false;
Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

In this example, route1 , route2 , route3 and route4 will all be treated as if route1 has to被加载，导致您的组件 Comp1 保持活动状态。

原文由 Sumurai8 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

无需重新加载 页面或刷新 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 已经改变了。

原文由 ManUtopiK 发布，翻译遵循 CC BY-SA 4.0 许可协议