javascript - 用 VueJS 2.0 模拟 Pjax

Question

最近我决定检查一下 VueJS 2.0。由于我仍然主要使用各种 CMS 系统(Wordpress、TYPO3、OctoberCMS 等)，所以我想尝试实现一个类似于页面加载的 pjax。令我惊讶的是，它并不像我想象的那么简单。

有没有办法替换部分页面并重新初始化 VueJS 中的组件？

我应该解释一下我为什么要实现这样的功能。在过去的几年里，我发现使用前端框架开发功能丰富的网站更加容易和快捷。但是，由于大多数客户需要后端来管理他们的网站，因此使用现有的 CMS 是轻而易举的事。过去我使用 Angular 来构建前端。它工作得非常好，即使使用 pjax，因为可以在 Angular 1.0 中重新初始化部分页面。

Angular 2.0 采用了不同的方法，虽然我非常喜欢他们用它所做的事情，但我认为它不适合在大多数前端由服务器渲染的环境中使用。这就是我决定检查 VueJS 的原因。

我想实现一个类似 pjax 的功能，因为 HTML 已经在服务器端呈现并且动态替换页面的部分看起来很酷:)

编辑

明确一点，我不是在谈论 jQuery pjax 插件，只是动态替换页面的一部分(在我之前工作的公司中简称为“pjax”:P)

Answer 1

是的，你绝对可以做到。您可以使用多个组件构建您的一页 View ，并且您可以只 reload the data将只更新该组件的一个组件，或者你也可以有 conditions使用 v-if，这样您就可以更改将动态呈现的组件。

fiddle 示例:http://jsfiddle.net/mimani/6dgbg2dL/

使用 setTimeout 模拟 ajax 的示例 fiddle :http://jsfiddle.net/6dgbg2dL/1/

您可以使用 vuex多个组件之间的通信，检查一个示例here .