Vue 路由：静默更新 URL 哈希值而不触发导航

2024-03-10 18:01:05

静默更新 URL 哈希值：在 Vue 路由中不触发导航

在构建单页应用程序时，有时需要在不触发 Vue 路由导航的情况下更新 URL 哈希值。这在需要更新哈希值来表示应用程序状态或传递数据时很有用。

原生 Vue 路由 API

不幸的是，Vue 路由 API 中没有内置方法可以静默更新 URL。但我们可以使用 JavaScript 的 history.pushState 和 history.replaceState 方法来手动更新哈希值：

// 更新 URL 哈希值，触发路由导航
router.push('/new-hash');

// 静默更新 URL 哈希值，不触发路由导航
history.pushState(null, null, '#/new-hash');

vue-router-hashmode 插件

另一个方法是使用 vue-router-hashmode 插件。此插件扩展了 Vue 路由器，提供了静默更新 URL 哈希值的方法：

import VueRouterHashmode from 'vue-router-hashmode';

Vue.use(VueRouterHashmode);

const router = new VueRouter({
  // ... 你的路由配置
});

// 静默更新 URL 哈希值，不触发路由导航
router.push({
  name: 'new-hash',
  silent: true,
});

注意：

使用 history.pushState 或 history.replaceState 时，确保应用程序已初始化且 Vue 路由器实例已附加到根元素。
vue-router-hashmode 插件仅在使用 hash 模式时有效。

示例代码

使用 vue-router-hashmode 插件的示例：

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueRouterHashmode from 'vue-router-hashmode';

Vue.use(VueRouterHashmode);

const router = new VueRouter({
  // ... 你的路由配置
});

new Vue({
  router,
  el: '#app',
  mounted() {
    // 静默更新 URL 哈希值，不触发路由导航
    this.$router.push({
      name: 'new-hash',
      silent: true,
    });
  },
});