4

我有一个特定的问题，我正在努力在网上查找信息。我已经使用 webpacker 成功地将 VueJS 安装到我的 Rails 6 应用程序中，并且在我的应用程序布局文件上注册了一个根组件：

<!-- application.html.erb -->
<!-- javascript pack tags loaded in head and my app component displays the template properly -->
<div id="vue-app-root">
    <app></app>
</div>

我知道在单页应用程序中，VueJS 应用程序会在访问网站时进行一次初始化，然后发出异步请求并由 VueJS 发起视图/模板更改——这一切都是有道理的。我的问题与 vue 应用程序初始化应该如何与多页应用程序一起工作有关。

应用程序是否在每次重新加载/turbolink 加载时完全初始化？如果我只是在各个页面中到处使用一些组件，我是否坚持让整个 VueJS 应用程序在每个页面加载时初始化，然后再初始化这些组件？如果是这样，我应该让 Vue JS 应用程序在 application.html.erb 中的 body 标记（或根元素）上初始化，还是应该让应用程序只在具有组件的页面上初始化？

4

2 回答 2

1

对于@sjaustirni 的回答，我要补充一点，这取决于您是否要使用 Rails 集成路由，您可以拆分 2 个代码库。我的意思是：如果你只使用 Rails 作为 API 而不是路由，你应该将 Vue 项目放在它自己的 repo 中，而不是混合使用两者。

当然，如果您使用 Rails 的路由，将两者放在同一个地方是有意义的。

另外，我想分享一下vue-turbolinks的存在，这可能对您的情况有用，尤其是在使用 Hotwire 时。
这是一个解释它的视频：https ://gorails.com/episodes/how-to-use-vuejs-and-turbolinks-together

于 2021-05-14T16:21:02.913 回答
1

您需要找出是什么负责您的路由 - Vue 还是 Rails？

如果是 Rails，那么是的，Vue 应用程序需要在每次页面加载时重新安装。这适用于您是否使用 Turbo/Turbolinks，只要 Vue 应用程序在获取的部分中。如果获取的部分在 Vue 容器之外并且您使用 Turbo/Turbolinks，则不会重新加载 Vue 应用程序。即使对于客户端渲染的 Vue 渲染也是如此。

如果是 Vue 做路由，Rails 可能不会做，否则 Vue 应用总是会重新加载。

于 2021-05-14T16:23:49.370 回答