使用Django 1.11+Viewflow-Pro 1.04：页面切换时源文件未更新

我之前在用Django 1.11搭配Viewflow-Pro开发时，也碰到过完全一样的坑！折腾了大半天才摸清楚原因——核心是Viewflow默认用了AJAX式页面导航：点击链接时它只会通过AJAX加载页面主体内容，不会刷新整个HTML文档，所以<head>里的CSS/JS资源就不会跟着更新，只有手动刷新才会拉取当前页的完整资源。

下面分享几个我亲测有效的解决办法：

方法1：禁用指定链接的AJAX导航 #

如果你的应用不需要单页式的流畅跳转体验，最简单的方式就是让特定链接走普通页面跳转。只需要给链接加上data-no-ajax属性就行：

<a href="{% url 'your-target-page' %}" data-no-ajax>跳转到目标页面</a>

这样Viewflow就不会对这个链接启用AJAX加载，点击后会触发整页刷新，资源自然就会正常更新了。要是想全局禁用，也可以去修改Viewflow的基础模板（比如viewflow/base.html），把负责AJAX导航的脚本段删掉。

方法2：动态更新页面资源（保留AJAX导航体验） #

如果想保留AJAX跳转的流畅感，那就得在页面加载完成后手动更新<head>里的资源：

1. 先给每个页面的专属资源加个唯一标识，比如自定义的data-page-resource属性：

   <link rel="stylesheet" href="{% static 'css/product-page.css' %}" data-page-resource="product-css">
   <script src="{% static 'js/product-page.js' %}" data-page-resource="product-js"></script>
   

2. 然后监听Viewflow的vf-page-loaded事件（AJAX加载完成后会触发这个事件），编写JS代码替换或新增资源：

   document.addEventListener('vf-page-loaded', function(event) {
       // 获取新页面里的专属资源元素
       const newResources = event.detail.page.querySelectorAll('[data-page-resource]');
       newResources.forEach(resource => {
           const existing = document.querySelector(`[data-page-resource="${resource.dataset.pageResource}"]`);
           if (existing) {
               // 替换已存在的旧资源
               existing.parentNode.replaceChild(resource.cloneNode(true), existing);
           } else {
               // 新增之前没有的资源到head里
               document.head.appendChild(resource.cloneNode(true));
           }
       });
   });
   

   这样每次AJAX加载新页面后，对应的CSS/JS就会自动更新了。

方法3：检查模板继承结构 #

还要确认你的页面模板有没有正确继承基础模板，并且在对应的块里加载专属资源。比如确保每个页面都在extra_css/extra_js这类块里覆盖资源：

{% extends 'base.html' %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/user-profile.css' %}">
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/user-profile.js' %}"></script>
{% endblock %}

如果模板继承结构有问题，也可能导致资源没有被正确替换，配合上面的动态更新方法效果会更稳定。

内容的提问来源于stack exchange，提问作者Chris Burrus