Handling single page application url and django url

I have a similar problem.

How can I use vue-router and django rest framework the same time?

This is my solution to this problem. Hope it helps you.

Expected results：

http://127.0.0.1:8000/       <-- TeamplateView index.html using vuehttp://127.0.0.1:8000/course <-- vue-routerhttp://127.0.0.1:8000/api    <-- rest frameworkhttp://127.0.0.1:8000/admin  <-- django admin

and I try this and it works!

urls.py

urlpatterns = [    url(r'^admin/', admin.site.urls),    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),    url(r'^api/', include(router.urls)),    url(r'^.*$', TemplateView.as_view(template_name="index.html")),]

The order is important, url(r'^.*$', TemplateView.as_view(template_name="index.html")), is the last one

and this is my vue router

const router = new VueRouter({  mode: 'history',  base: __dirname,  routes: [{      path: '/courses',      component: CourseSet    }, {      path: '/',      component: hello    }]})

My project on GitHub

Since you have mentioned "single page":

1. The server is supposed to serve just one page the index.html (or whatever else you would like to call it).

2. The server and the web application (front-end) code would communicate via api calls, such that the server provides resources and the web-app takes care of using that resource.

3. In case of a missing resource, the server still must not respond with a separate page, it should still respond with a message that the web-app can use.

I have a single page application created in Vue.js that utilizes the HTML5 History Mode for routing

I believe you are using vue-router, which simulates the single-page app to be a full-featured, multi-page application.

You may want to take a look at this and this, but the above holds true for a single page application.

You shared your urlpatterns:

urlpatterns = [  url(r'^admin/', admin.site.urls),  url(r'^api-token-auth/', obtain_jwt_token),  url(r'^.*$', views.home),]

But other urls like the media or static urls will also point to the same catch all pattern regex. How can I solve this problem?

1. A way you can manage that would be either by, serving on a route other than '/' like mentioned above for /app.

   urlpatterns = [  url(r'^admin/', admin.site.urls),  url(r'^api-token-auth/', obtain_jwt_token),  url(r'^.*$/app', views.home),]

   and in your router.js file:

   new Router({  mode: 'History',  base: '/app'  routes: [    {      path: '/',      name: 'name',      component: ComponentName    }  ]})

2. Or prefixing the purpose served by the urls like

   urlpatterns = [  url(r'^api/admin/', admin.site.urls),  url(r'^api/api-token-auth/', obtain_jwt_token),  url(r'^.*$', views.home),  url(r'^.*$/assets', your-static-assets) ]

I'm using VueJS router enabled history mode with Django 2.x by this way:

From app urls.py you need to repath your frontend url like this:

# urls.pyfrom django.urls import path, includefrom django.urls import re_pathurlpatterns = [    path('', TemplateView.as_view(template_name="application.html"), name="app", ),    # ... rest of your urls]urlpatterns += [    re_path('^.*$', TemplateView.as_view(template_name="application.html")),]

Now history mode working smoothly!

http://sample.com/#/users/login/

Become:

http://sample.com/users/login/