Vueでnotfoundページを作ったが、RailsのRouting Errorが表示されてしまう

Question

現在自主学習として、RailsとVueでSPAアプリケーションを作っています。

vue-routerで404ページを作りたく、以下のようにpathが設定されているもの以外はNotFoundコンポーネントを表示させるようにしました。

しかし、RailsのRouting Errorが表示されてしまいます。

router.js

import Vue from 'vue'
import Router from 'vue-router'

　　　・
　　　・
　　　・

import NotFound from '../components/notFound'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [

　　　・
　　　・
　　　・

    // うまくリダイレクトされていない
    {
      path: '*',
      component: NotFound,
    }
  ]
})

app.vue

<template>
  <v-app id="inspire">
    <Header/>
      <router-view>
      </router-view>
  </v-app>
</template>

<script>
 import Header from "./components/Header";

 export default {
    components: {
      Header,
    },
 }
</script>

どんな些細なことでもよろしいので、ご教示頂けますと幸いです。
よろしくお願いします。

Answer 1

Vue.js のルーティングと Rails のルーティングの概念を整理されたほうがいいと思います。

Vue.js のルーティングはrouter-linkや Vue Router のメソッドを使った場合に有効になります。
通常のaタグをクリックしたり、ページをリロードするとサーバー、つまり Rails へリクエストが飛んでそちらでルーティングが解決されます。

今はこの 2つのルーティングを混同されているように思いました。

もし後者の場合でも Vue Router でルーティングを解決したい場合は、Rails の 404 ページに Vue.js のコンポーネントを埋め込むか、Vue.js のコンポーネントがあるページにリダイレクトする必要があると思います。
（ただ、Vue Router で解決するべきリクエストが Rails へ到達している点は設計レベルで課題がある気もします）

おそらくこちらの記事が参考になると思います。
Rails+Vue+VueRouterでhistoryモード時に直接表示で404エラーになってしまう対策方法 サシミスタジオ

個人的には Vue Router を使うのであれば、その部分は Rails と独立させたほうが実装が整理されてシンプルになることが多いと思っています。
例えば、フロントエンドを Vue.js + Vue Router で実装して、Rails を API として使うといった方法などがあります。
とはいえ、これは要件やスキルセットによるので、ご自身でいろいろ実装してベターな構成や方法を見つけていただければと思います。