How to make a route navigable from a URL with VueJS

Question

My apologies as I don't know the correct terminology for this issue, which perhaps is half my problem...

I've created an SPA with VueJS – a small portfolio site – and am currently using VueRouter to create a /information route.

I want this route to be shareable by URL – so that if I link you to www.example-url.com/information, then this should load that route. However at the minute I get the error message: 404 Not Found nginx/1.8.1

Is a pre-render plugin like https://github.com/chrisvfritz/prerender-spa-plugin the appropriate solution to this problem? From my understanding this would solve the issue, but it's not explicitly advertised as a benefit of pre-rendering so I'm a little unsure.

Here is the site in question: http://isabellaburley.com/information

Many thanks,

Possible duplicate of [Configuring nginx for single page website with HTML5 push state URL's](https://stackoverflow.com/questions/13812550/configuring-nginx-for-single-page-website-with-html5-push-state-urls) — Daniel A. White, Feb 24 '18 at 20:34
@Daniel A. White But I don't want to point the `/information` url to the index.html – I'd like it to load the `/information` route when visited – that's not the same issue, is it? — Simon Rogers, Feb 24 '18 at 20:36
You can point `/information` to the `index.html`. If the route is configured, vue will know and work properly.] — acdcjunior, Feb 24 '18 at 23:33
You need to use the router in the hash mode: http://isabellaburley.com/#/information — stdob--, Feb 25 '18 at 03:30

score 0 · Answer 1 · answered Oct 03 '18 at 09:08

0

add this to your nginx vhost config:

server {
    ...

    location / {
        try_files $uri $uri/ @rewrites;
    }

    location @rewrites {
        rewrite ^(.+)$ /index.html last;
    }

    ...
}

answered Oct 03 '18 at 09:08

Massimo Selvi

21
6

How to make a route navigable from a URL with VueJS

1 Answers1