vue-router, nginx and direct link
I struggled for several hours solving the same problem. After all this config works for me:
events {
...
http {
...
server {
listen 80;
server_name localhost;
location / {
root /path/to/your/project/html;
index index.html index.htm;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
}
}
}
I have almost the same router setup as you.
I've found 1 possible solution with the suggestion from a co-worker.
I'm now passing URI as a query parameter in nginx. So my config is now this:
location / {
try_files $uri $uri/ /index.html?uri=$uri
}
Then in my router configuration in VueJS:
const routes = [
{
path: '/',
component: Landing,
beforeEnter: (to, from, next) => {
const { uri } = to.query;
if (uri != null && uri != '/') {
next(false);
router.push(uri);
} else {
next();
}
}
}, ...
This seems to do the trick, although looks a bit dodgy.