🎢
【Nuxt】ルーティングの基礎とname指定
はじめに
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を呼び出してくれる。
参考資料
Discussion