title: vue-router, nginx and direct link
body: <p>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 <code>myapp.com/mypath</code>.</p>
  
  <p>I've tried server configuration as described in the <a href="https://router.vuejs.org/en/essentials/history-mode.html#nginx" rel="noreferrer">vue router docs</a> as well as suggested similar configurations on stack overflow. My current nginx location configuration as follows: </p>
  
  <pre><code>location / {
      try_files $uri $uri/ /index.html;
  }
  
  location /subscribe {
      proxy_pass http://127.0.0.1/subscribe // express API app
  }
  </code></pre>
  
  <p>All that does is redirects any path to my root component (path: <code>/</code>) and not <code>/mypath</code>. This does make sense and <code>location</code> seems to only redirect to the index file. How can I redirect direct link of <code>myapp.com/mypath</code> to <code>/mypath</code> route in my VueJS app?</p>
  
  <p>Here is how my vue routes setup now:</p>
  
  <pre><code>...
  const routes = [
      { path: '/', component: Landing },
      { path: '/mypath', component: MyPath }
  ];
  
  const router = new VueRouter({ mode: 'history', routes });
  
  new Vue({
      el: '#app',
      router,
      render: h =&gt; h(App)
  });
  </code></pre>