我们将AngularJS嵌入到我们的Django应用程序中,URL路由由AngularJS ui- router处理。使用ui- sref并在应用程序内单击可在所有部分之间进行良好的导航。
return $stateProvider.state('root.dashboard', { abstract: true, url: 'dashboard/' }).state('root.dashboard.profile', { url: 'profile/', views: { '@': { templateUrl: Urls['dashboard:profile'](), controller: 'ProfileController' } } }).state('root.dashboard.home', { url: '', views: { '@': { templateUrl: Urls['dashboard:dashboard_home'](), controller: 'DashboardController' } } ...
问题是当用户导航到非根目录页面(例如http://example.com/dashboard/profile/),并且用户刷新浏览器,重新加载浏览器的URL或直接将非根URL粘贴到浏览器中时。http://example.com/dashboard/在这种情况下,用户将被重定向到根页面(),而不是在浏览器中加载保留相同URL的页面。
http://example.com/dashboard/profile/
http://example.com/dashboard/
由于路由是由Angular处理的,因此在服务器端,我们没有为那些非根URL定义任何url路由。相反,我们有将404重定向到根页面的中间件:
class Redirect404(object): def process_response(self, request, response): if response.status_code != 404 or request.method != 'GET': return response return HttpResponsePermanentRedirect('/dashboard')
我们希望路由器能够保留原始URL,并将用户带回原始页面(即“ dashboard/profile”)。注意,我们在Angular中设置了HTML5Mode,如下所示:
dashboard/profile
$locationProvider.html5Mode = true;
在我们的理解和/或设置中存在一些错误,请您澄清一下。
我们希望路由器能够维护原始URL,并将用户带回原始页面。
那是误会。
这是事件的顺序:
GET
301
window.href
换句话说,当您重定向时,您将丢失原始URL。
解决方案很简单:无需重定向,只需返回页面即可响应任何(有效)URL。这样,所请求的URL就会得到维护,当Angular启动时,它将能够找出正确的路由。(这假定路由已在Angular中正确设置,但是听起来您已经可以使用了。)
实现也很简单。只需通过以下方式更改Django urls.py:
urls.py
urlpatterns = [ url(r'^dashboard/$', my_view), ]
像这样:
urlpatterns = [ url(r'^dashboard/.*$', my_view), ]