ruby-on-rails - 带有 Turbolinks 的多页 Rails 6 应用程序的 VueJS - 布局

Question

我有一个具体问题，我正在努力在网上查找相关信息。我已经使用 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 启动 View /模板更改 - 一切都有意义。我的问题与 vue 应用初始化应该如何与多页应用一起工作有关。
应用程序是否在每次重新加载/turbolink 加载时完全初始化？如果我只是在各个页面中到处使用一些组件，我是否坚持在每个页面加载时初始化整个 VueJS 应用程序，然后再初始化这些组件？如果是这样，我应该在 application.html.erb 中的 body 标记(或根元素)上初始化 Vue JS 应用程序，还是应该只在具有组件的页面上初始化应用程序？

Answer 1

你需要找出什么负责你的路由 - Vue 还是 Rails？
如果是 Rails，那么是的，每次页面加载时都需要重新安装 Vue 应用程序。这适用于您是否使用 Turbo/Turbolinks，只要 Vue 应用程序在获取的部分中。如果获取的部分在 Vue 容器之外并且您使用 Turbo/Turbolinks，则 Vue 应用程序将不会重新加载。即使对于在客户端上水合的服务器渲染 Vue 也是如此。
如果是 Vue 做路由，Rails 可能不会做，否则 Vue app 会一直重新加载。