frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【注意】router.jsに記述するrouteの順番

スポンサードリンク


スポンサードリンク


router.jsに記述するrouteの順番は気を付けなければいけません。

下記のようにルーティングすると意図した挙動になりません。

export default new Router({
  mode: 'history',
  routes: [
   {
    {
      path: '/hoge/:id/',
      name: 'fuga2',
      component: () =>
        import(/* webpackChunkName: "takaku" */ './pages/fuga2.vue')
    },
    {
      path: '/hoge/:id/:hash',
      name: 'fuga1',
      component: () =>
        import(/* webpackChunkName: "takaku" */ './pages/fuga1.vue')
    },
  }  
 ]
})


なぜなら/hoge/:id/のようにすると/hoge/:id/:hashというパスもルーティングを通してしまうからです。


そのため順番を下記のように変更します。

export default new Router({
  mode: 'history',
  routes: [
   {
     {
      path: '/hoge/:id/:hash',
      name: 'fuga1',
      component: () =>
        import(/* webpackChunkName: "takaku" */ './pages/fuga1.vue')
    },
    {
      path: '/hoge/:id/',
      name: 'fuga2',
      component: () =>
        import(/* webpackChunkName: "takaku" */ './pages/fuga2.vue')
    },
  }  
 ]
})

ポイントとしては長い記述のパスを優先的に先に書くようにします。