vue-routerをhisotoryモードにすると表示されなくなる

Xampp + Laravel5.5 + Vue.js + Vue routerで現在はローカルでページ遷移のないコンテンツを作っています。
通常の設定では<router-view></router-view>の間に子コンポーネントが表示できて
切り替えられることが確認できています。

問題はこのままだとURLに♯がついてしまうのでハッシュモードと言う状態でヒストリーモードにしたいと思い
https://router.vuejs.org/ja/essentials/history-mode.html
こちらを参考にhtaccess？の設定しようと思いましたが上手くいきませんでした。
具体的にどこにあるファイルにどう記載すれば実現できますでしょうか？
お助けいただけると幸いです。

php
1<body>
2    <div id="app">
3       <router-view></router-view>
4    </div>
5    <script src="js/app.js"></script>
6</body>

js
1import Vue from 'vue'
2import VueRouter from 'vue-router'
3require('./bootstrap');
4Vue.use(VueRouter);
5window.Vue = require('vue');
6
7const router = new VueRouter({
8    mode: 'history',  ←この行を入力すると動作しない
9    routes: [
10        // TOPページ
11        { path: '/', component: require('./components/index.vue') },
12        { path: '/page1', component: require('./components/page1.vue') },
13        { path: '/page2', component: require('./components/page2.vue') },
14    ]
15});
16
17const app = new Vue({
18    el: '#app',
19    router
20});

sakapun

2018/04/10 13:25

うまくいかないというのは、/にアクセスすることはできるが、他のページで再読込すると404状態になるということでしょうか。

fujisan

2018/04/10 15:27

いえ、historyモードにするとコンポーネントが表示されなくなります。historyでなければ最初のコンポーネントから別のコンポーネントにも遷移できます。おそらくサーバーの設定をしないといけないのでしょうがわからず困っております。よろしくお願いします。

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

回答1件

laravelのルーティングに制約しないとSPAはこうなりますよね。

ちょうどう僕が答えたこの問題と似てる感じで、laravelにおけるルーティングを制約してみたらどうでしょうか。

#####routes/web.php

php
1Route::get('/{any}', function () {
2    return view('index');
3})->where('any', '.*');

投稿2018/04/19 15:38

toyjack

総合スコア29

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

vue-routerをhisotoryモードにすると表示されなくなる

関連した質問