• TOP

vue-routerのルーティングがマッチしない

2018-05-03T00:39:00+09:00 2018-05-13T13:33:23Z

vue.jsではURIに対するルーティング設定を行う方法としてvue-routerを用いる方法が一般的ですが、ルーティングがうまく働かずしばらくハマりました。

やりたいこと

チャットアプリケーションのようなものを作っていて、以下のようにURIに応じてコンポーネントを表示分けしたかったんです

path	遷移先
/	ホーム
/rooms	ルーム一覧
/members	ユーザ一覧
それ以外	エラーページ(NotFound)

そこで下記のようにルーティング設定を書きました

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeComponent from './component/Index.vue'
import RoomsIndexComponent from './component/Rooms/Index.vue'
import MembersIndexComponent from './component/Members/Index.vue'
import NotFoundComponent from './component/NotFound.vue'

Vue.use(VueRouter);

/** ルーティング start ***/ 
const router = new VueRouter({
  mode: 'history',
  routes: [
      {path: "/", component: HomeComponent},
      {path: "/rooms", component: RoomsIndexComponent},
      {path: "/members", component: MembersIndexComponent},
      {path: "*", component: NotFoundComponent},
  ]
});
/** ルーティング end***/

const app = new Vue({
  el: '#app',
  router
});

どうしてもURLがマッチしない

どんなURLを指定しても、常にワイルドカードで指定した「NotFound」のコンポーネントが出てきてしまいました。

じゃあワイルドカード指定に負けているのか！！と思って、NotFoundComponentの行を消しても、今度はどのパスにもマッチせずに何も表示されなくなる始末…

これはいったいどうしたものかと頭を悩ませる

解決

パスを囲むダブルクォーテーションを、シングルクォーテーションに変えたらマッチするようになりました

/** ルーティング start ***/ 
const router = new VueRouter({
  mode: 'history',
  routes: [
      {path: '/', component: HomeComponent},
      {path: '/rooms', component: RoomsIndexComponent},
      {path: '/members', component: MembersIndexComponent},
      {path: '*', component: NotFoundComponent},
  ]
});
/** ルーティング end***/

PHPとかだと変数展開の有無があるので使い分ける事は認識しているのですが、
Javascriptはダブル/シングルクォーテーションの違いはなかったはず…
とりあえず動くには動いたのですが、かなりもやもやするので、またどういうことかわかったら追記しよう…。

環境メモ

• Laravel 5.6 上でLaravel mixにてコンパイル