🎢

【Nuxt】ルーティングの基礎とname指定

2022/11/30に公開約800字

はじめに

router.pushでname指定をしますが、index.vueではなくフォルダ下のページまで指定する書き方がわからなかったので備忘録です。

ルーティング

下記のファイル構造の時、

pages/
--| car/
-----| index.vue
-----| mazda.vue
--| index.vue

自動的に生成されるroutesは、

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'car',
      path: '/car',
      component: 'pages/car/index.vue'
    },
    {
      name: 'car-mazda',
      path: '/car/mazda',
      component: 'pages/car/mazda.vue'
    }
  ]
}

router.pushで指定してみる

既述のように、name指定の部分は階層以下を-で繋げて記述するようになっています。
つまり、

router.push({ name: 'parent_page-child_page' })

で基本的にはOK

上記の例の場合、mazda.vueにルーティングしたい場合は

router.push({ name: 'car-mazda' })

path: '/car/mazda'に飛んで、pages/car/mazda.vueを呼び出してくれる。

参考資料

https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/guide/routing/

Discussion

ログインするとコメントできます