从 createWebHashHistory() 迁移到 createWebHistory() 有什么影响？

Question

我发布了一个使用 createWebHashHistory() 来管理 URL 的应用程序。例如，用户访问以下 URL 来访问一个叫做地震频道的东西：

https://app.radar.chat/#/channel/earthquakes

我想改为使用 createWebHistory() 来管理 URL（SEO、社交媒体预览、iOS 通用 link 配置等） .考虑到这一点，我希望我的新 URL 结构如下所示：

https://app.radar.chat/channel/earthquakes

我知道要支持此更改，我需要更改服务器。最简单的方法是让服务器将传入请求重定向到 index.html 文件（这是 documented extensively on the Vue website）。

但是，这些旧页面 link 在野外有 URL，URL 已打印且永远无法更新。

是否有一种方便的机制可以继续支持旧的基于散列的 URL，同时让非散列的 URL 成为新的默认值？

Answer 1

在您的路由器配置中，您可以在索引路径上添加一个 global beforeEach hook 以解析为 URL 中的哈希路径（如果存在）：

// router.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [⋯]
})

router.beforeEach((to, from, next) => {
  if (to.path === '/' && to.hash.startsWith('#/')) {
    next(to.hash.substr(1))
  } else {
    next()
  }
})

export default router

demo

从 createWebHashHistory() 迁移到 createWebHistory() 有什么影响？

What are the implications of migrating from createWebHashHistory() to createWebHistory()?

vue.js

vue-router