(Rails× Vue)リロード対策で、 vueインスタンスを作成するjsファイルを複数作ることは設計として正しいか

###環境
Rails6.0.3
Vue2.6
WebPacker

困っていること

RailsにVueを組み込み、アプリの作成とVue Routerを使用し部分的にSPAを試しています。
端的に今困っていることが、historyでブラウザのリロード対策のためにVueのインスタンスを作成するファイルを画面分作成しなければならないということです。
例えば以下のようにログインとユーザーページのVueのルーティングを行なっているとします。

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import Userpage from '../user_page.vue'
import Signin from '../sign_in.vue'

const routes =[
  { path: '/sign_in', component: Signin },
  { path: '/user_page', component: Userpage, name:Userpage }
];

const router = new VueRouter({
  routes,
  base: process.env.BASE_URL,
  mode: 'history'
});

export default router;

このままであると例えば/user_pageというパスをリロードした際はVueRouterで設定したパスではなくサーバーのパスを見に行ってしまうと思います。
参考書などを見るとnginxでよしなに設定するみたいですが、代わりにroutes.rbで設定してあげることでリロード対策を行なっています。

Rails.application.routes.draw do
  get '/sign_in', to: 'api/v1/exports#login'
  get '/user_page', to: 'api/v1/exports#user'
end

Railsでは<%= javascript_pack_tag ...%>などvueインスタンスを作成するjsファイルをerbに記載することでVueのコンポーネントを読み込めると思うので、
exports/login.html.erbやexports/user.html.erbという空のコントローラーと空のerbファイルを作り、
そこにjavascript_pack_tagを<%= javascript_pack_tag user_page%>、<%= javascript_pack_tag sign_in%>と各々配置。
更新した際はそのerbテンプレートを見に行き、vueがレンダリングされるようにしています。

しかしここで問題が画面が2枚であればこれでも問題がないのですが、画面が10枚20枚と増えてくると、その度に以下のようなjsファイルを作成する必要がありかなりしんどくなるなと思いました。

//user_page.js
import Vue from 'vue'
import Userpage from '../entries_views/user_page.vue'
import router from "../router/router.js";


document.addEventListener('DOMContentLoaded', () => {
    const userpage = new Vue({
      router,
      render: h => h(Userpage)
    }).$mount('#users')
    document.body.appendChild(userpage.$el)
　}
)


//sign_in.js
import Vue from 'vue'
import Login from '../entries_views/sign_in.vue'
import router from "../router/router.js";

document.addEventListener('DOMContentLoaded', () => {
    const login_app = new Vue({
      router,
      render: h => h(Login)
    }).$mount('#login')
    document.body.appendChild(login_app.$el)
})

Rails×Vueのリロード対策としてこの方法が正しいか、またそうでなければ他に良い方法がないかお伺いできると幸いです。
よろしくお願いします。

runnynose

2021/06/21 20:31 編集

私がRailsを触ったことなく恐縮なのですが、JavaScriptファイルを増やすというのはおかしいと思いました。ルーティング処理はJavScriptに任せてしまって、各URLのレスポンス結果は、全て同一のVueアプリを返すわけにはいかないですかね？？

widget11

2021/06/22 18:38

ご返信ありがとうございます！そうですよね設計的に歪があるなとは感じていましたがやはりおかしいですよね。本当はjsにルーティング周りは全て託したいのですが、記載している形でブラウザリロードをするとサーバーのルーティングを見に行ってしまうのでこの様な一時対策をとっている形となります。リロードした際でもvueのルーティングを見に行く方法はございませんでしょうか？お手数をおかけしますがご返信いただけると幸いです。