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

发布于 2025-01-16 22:03:00 字数 672 浏览 0 评论 0 原文

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

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

我想切换到使用 createWebHistory() 来管理 URL（SEO、社交媒体预览、iOS 通用链接配置）， ETC）。考虑到这一点，如果我的新 URL 结构如下所示，我希望它：

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

我知道为了支持此更改，我需要进行服务器更改。最简单的方法是让服务器将传入请求重定向到 index.html 文件（这是 Vue 网站上有大量记录）。

然而，有一些 URL 链接到这些旧页面，这些 URL 已经被打印出来并且永远无法更新。

是否有一种方便的机制可以继续支持旧的基于哈希的 URL，同时将非哈希 URL 设为新的默认值？

原文

I have an application that I released that uses createWebHashHistory() to manage URLs. For example, a user visits the following URL to visit something called the earthquakes channel:

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

I would like to switch over to using createWebHistory() to manage URLs instead (SEO, social media previews, iOS universal links configuration, etc). With that in mind, I would like it if my new URL structure looks like this:

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

I know that to support this change I need to make a server change. The easiest way is to have the server redirect incoming requests to an index.html file (this is documented extensively on the Vue website).

However, there are URLs in the wild that link to these old pages, URLs that have been printed and that can never be updated.

Is there a convenient mechanism to continue to support the old hash-based URLs while having the non-hashed URLs be the new default?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

|煩躁 2025-01-23 22:03:00

在路由器配置中，您可以添加全局 beforeEach 挂钩解析为 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

演示

In your router config, you could add a global beforeEach hook on the index path that resolves to the hash path in the URL if it exists:

// 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

回复收藏 0 原文

~没有更多了~