Search code examples
nginxvue.jsvuejs2vue-router

vue-router, nginx and direct link


I'm trying to setup a vue-router on my nginx server. The issue I'm having is that my route doesn't work if I enter url directly to the browser myapp.com/mypath.

I've tried server configuration as described in the vue router docs as well as suggested similar configurations on stack overflow. My current nginx location configuration as follows:

location / {
    try_files $uri $uri/ /index.html;
}

location /subscribe {
    proxy_pass http://127.0.0.1/subscribe // express API app
}

All that does is redirects any path to my root component (path: /) and not /mypath. This does make sense and location seems to only redirect to the index file. How can I redirect direct link of myapp.com/mypath to /mypath route in my VueJS app?

Here is how my vue routes setup now:

...
const routes = [
    { path: '/', component: Landing },
    { path: '/mypath', component: MyPath }
];

const router = new VueRouter({ mode: 'history', routes });

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

Solution

  • 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.