I’m working on a website that essentially functions the same as the Internet Archive’s Wayback Machine, storing backups of entire websites. The Wayback Machine’s URLs for backups look like this:
https://web.archive.org/web/20051222052158/http://www.lego.com/eng/bionicle/story/2004/cityguide/default.asp?page=home
Note that the URL ends with a filename and a query parameter, and that URL will still take you to a page on the Wayback Machine wrapping default.asp
, not directly to the webpage at default.asp
.
At present, my router path for the page with this same functionality looks like this:
{
path: "/wayback",
name: "wayback",
component: () => import("../views/WaybackView.vue"),
alias: [
"/wayback/",
"/wayback/index",
"/wayback/index.html",
"/wayback/index.htm",
"/wayback/index.php",
],
},
{
path: "/wayback/:datetime/:originalurl(.*)?",
name: "wayback",
component: () => import("../views/WaybackView.vue"),
props: (route) => ({
datetime: route.params.datetime,
originalurl: route.params.originalurl,
}),
alias: [
"/wayback/:datetime/:originalurl(.*)?/",
"/wayback/:datetime/:originalurl(.*)?/index",
"/wayback/:datetime/:originalurl(.*)?/index.html",
"/wayback/:datetime/:originalurl(.*)?/index.htm",
"/wayback/:datetime/:originalurl(.*)?/index.php",
],
},
This only sort of provides the intended functionality — at present, it only works if you end the full URL with a trailing slash, and include no query parameters of any kind. So
wayback/2005/http://www.lego.com/eng/bionicle/story/2004/cityguide/default.asp/
works just fine, but
wayback/2005/http://www.lego.com/eng/bionicle/story/2004/cityguide/default.asp
wayback/2005/http://www.lego.com/eng/bionicle/story/2004/cityguide/default.asp?page=home/
and the actually accurate
wayback/2005/http://www.lego.com/eng/bionicle/story/2004/cityguide/default.asp?page=home
do not work at all — they all just lead to a blank gray screen, without even giving me an error in the console other than a simple 404. This is obviously a problem, as it means I can’t actually use the correct URL for my own archive, and I’m completely unable to archive pages that relied on query parameters, as they don’t work even if they’re inside a (still incorrect) trailing slash.
I have tried manually appending query strings after the router does its work, so
wayback/2005/http://www.lego.com/eng/bionicle/story/2004/cityguide/default.asp/?page=home
sorta works, but it’s still not accurate to the original URL of the page, and of course requires extra work.
So how can I make Vue Router pass everything after :datetime/
in as the originalurl
param, ignoring any filenames, query strings, trailing slashes or lack thereof, et cetera?
If this requires modifications to the code of Vue Router itself, I can live with that for the sake of historical accuracy, though it’s definitely not preferable.
Thank you in advance for any help.