Vue.js Router: history mode and AWS S3 (RoutingRules)

Question

I have a Vue.js application up and running with Amazon S3 and Cloudflare.

When I open the index and browse to /dashboard, everything works fine. But when I open a route

Answer 1

I think this problem has two components:

1.

If a request is made directly (outside of the Javascript App) to a sub path such as /jobs then S3 returns a 404, because the path/object doesn't exist. The simplest way to fix this is from within S3 itself, where you redirect all error pages back to index.html.

However this doesn't work from a CDN such as Cloudfront, and presumably Cloudflare.

A good trick is to use files inside S3 that redirect users like this:

jobs/ -> /index.html jobs -> /index.html

For example if someone makes a request to site/ they will get the following html file:

"redirect":"
Redirecting to Home"

Secondly...

If I do it like that I just get my Header and Footer rendered but nothing more.

This is a problem I've had where the router-view doesn't initialise properly, even though the component that contains the router-view has loaded.

What I have done for now is redirect my router when the main "App" component is created:

created () {
console.log('route', this.$route.path)
this.$router.replace(this.$route.query.redirect || '/')
}

This has the added bonus of removing the index.html from your path (Which was put there by your new redirections) whilst forcing your router-view to render...

My #app component is the parent component, with a navbar, footer, and the router-view that renders all of the sub pages/components.