django - 处理单页应用程序 url 和 django url

Question

我有一个在 Vue.js 中创建的单页应用程序，它使用 HTML5 历史模式进行路由，并且 html 文件由 Django 提供。

django的urls.py是这样的:

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

和views.home:

def home(request):
    return render(request, 'index.html')

考虑以下场景:

1. 用户访问首页(即/)

由于主页响应单页 Vuejs 应用程序所需的 index.html，因此它按预期工作。

1. 用户从那里导航到关于页面(即 /username/12)。

它仍然工作正常，因为它使用 Vue 路由器进行导航。

1. 现在，用户刷新页面。

由于 urls.py 模式中没有 /username/12，它将显示找不到页面 (404)。。 p>

现在，我可以在 urls.py 中提供另一种模式来捕获最后顺序中的所有模式，如下所示:

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

但其他网址(如媒体或静态网址)也将指向相同的捕获所有模式正则表达式。我该如何解决这个问题？

Answer 1

I have a similar problem.

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

这是我对这个问题的解决方案。希望对你有帮助。

预期结果:

http://127.0.0.1:8000/       <-- TeamplateView index.html using vue
http://127.0.0.1:8000/course <-- vue-router
http://127.0.0.1:8000/api    <-- rest framework
http://127.0.0.1:8000/admin  <-- django admin

我尝试了这个，它成功了!

网址.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

这是我的 vue 路由器

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

My project on GitHub