title: Handling single page application url and django url
body: <p>I have a single page application created in Vue.js that utilizes the HTML5 History Mode for routing, and the html file is served with Django.</p>
  
  <p>The <strong>urls.py</strong> of django is like so:</p>
  
  <pre><code>urlpatterns = [
      url(r'^$', views.home),
      url(r'^admin/', admin.site.urls),
      url(r'^api-token-auth/', obtain_jwt_token),
  ]
  </code></pre>
  
  <p>And <strong>views.home</strong>:</p>
  
  <pre><code>def home(request):
      return render(request, 'index.html')
  </code></pre>
  
  <p>Consider the following scenario:</p>
  
  <ol>
  <li>User visits the home page (i.e., <code>/</code>)</li>
  </ol>
  
  <p>Since, the home page responds with required index.html for the Single page Vuejs app, it works like its supposed to.</p>
  
  <ol start="2">
  <li>From there the user navigates to the about page (i.e., <code>/username/12</code>).</li>
  </ol>
  
  <p>Its still working fine, as its navigating with the Vue router.</p>
  
  <ol start="3">
  <li>Now, the user refreshes the page.</li>
  </ol>
  
  <p>Since there's no <code>/username/12</code> in the <strong>urls.py</strong> patterns, it will show <strong>Page not found (404)</strong>.</p>
  
  <p>Now, I could provide another pattern in <strong>urls.py</strong> to catch all pattern in the last order as this:</p>
  
  <pre><code>urlpatterns = [
      url(r'^admin/', admin.site.urls),
      url(r'^api-token-auth/', obtain_jwt_token),
      url(r'^.*$', views.home),
  ]
  </code></pre>
  
  <p>But other urls like the media or static urls will also point to the same <em>catch all pattern regex</em>. How can I solve this problem?</p>