/newを呼んで欲しいのに/:idを呼んでしまう場合の原因
RailsとVue.jsを使用。
router.jsに、下記のように各コンポーネントへのルーティングを設定していた。
router.js
{ path: '/expenses', component: Expense },
{ path: '/expenses/:id', name: 'expenseShow', component: ExpenseShow },
{ path: '/expenses/:id/edit', name: 'expenseEdit', component: ExpenseEdit },
{ path: '/expenses/new', name: 'expenseNew', component: ExpenseNew },
/expenses(一覧)から/expenses/new(登録ページ)へは問題なく遷移出来る。
が、
/expenses/new(登録ページ)でリロードをすると、
なぜかパスは /expenses/new のままだが expenseShow(/expenses/:id) のコンポーネントが読み込まれる、という現象が発生。
調べると、/new がリクエストパラメータとして見なされ、
Started GET "/expenses/new" for ::1 at 2019-10-01 17:06:53 +0900
17:06:53 web.1 | Processing by HomeController#index as HTML
17:06:53 web.1 | Parameters: {"id"=>"new"} <==== これ
結果、/expenses/:id が適用され、
expenseShowのコンポーネントが読み込まれていた。
なので、/expenses/newを /expenses/:id より手前に持ってくるよう順番を入れ替えることで解消した。
router.js
{ path: '/expenses', component: Expense },
// /expenses/newを手前に
{ path: '/expenses/new', name: 'expenseNew', component: ExpenseNew },
{ path: '/expenses/:id', name: 'expenseShow', component: ExpenseShow },
{ path: '/expenses/:id/edit', name: 'expenseEdit', component: ExpenseEdit },