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

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

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

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

router.js

js
1import Vue from 'vue'
2import Router from 'vue-router'
3
4　　　・
5　　　・
6　　　・
7
8import NotFound from '../components/notFound'
9
10Vue.use(Router)
11
12export default new Router({
13  mode: 'history',
14  routes: [
15
16　　　・
17　　　・
18　　　・
19
20    // うまくリダイレクトされていない
21    {
22      path: '*',
23      component: NotFound,
24    }
25  ]
26})

app.vue

js
1<template>
2  <v-app id="inspire">
3    <Header/>
4      <router-view>
5      </router-view>
6  </v-app>
7</template>
8
9<script>
10 import Header from "./components/Header";
11
12 export default {
13    components: {
14      Header,
15    },
16 }
17</script>
18

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

行動規範の内容に同意します

回答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 として使うといった方法などがあります。
とはいえ、これは要件やスキルセットによるので、ご自身でいろいろ実装してベターな構成や方法を見つけていただければと思います。

投稿2020/03/03 05:05