CODEWITHSUNDEEP
javascriptvue.js
dave_agilepixel
dave_agilepixel

Reputation: 183

Dynamic URL routes for Static site in Vue

I have a static site, there is no way to add in re-writes via htaccess or similar which is how would normally approach this functionality. We're running the site with Vue, on top of static .html templates eg

\example\index.html

So I can visit www.mywebsite.com/example/ and it'll load the page, and run Vue, when I want a subpage, based on this layout, I currently have to create

\example\subpage\index.html

Again this works great www.mywebsite.com/example/subpage/, but what I'm wanting is to pull data in via an API feed, and be able to have dynamic URLs

\example\subpage\any-page-name-here

The closest I've found is to use # so

\example\subpage#any-page-name-here

Which allows Vue to pick up the data after the # and query the API with that.

Any help would be greatly appreciated, there's no work around for the limitations of the hosting, so I need a Vue/JS/HTML only soltion.

Thanks!

Upvotes: 0

Views: 780

Answers (1)

MrCode
MrCode

Reputation: 64526

As you cannot change the web server configuration, the only possibilities are the hashtag option or the query string e.g

example.com/site/?dynamic-data

The reason is the web server decides what to do with the request in the first instance, and without any configuration it will simply load a page if it exists or show a 404. This happens before your Vue app is invoked.

Upvotes: 1

Related Questions