ルーティング設定（.nuxt/router.js）
nuxt.jsのルーティングの設定ファイルになります。
なお、pagesディレクトリ配下に新しいページを作成すると、routesプロパティの配列にページが追加されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
export function createRouter () { return new Router({ mode: 'history', base: '/', linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [ { path: "/", component: _1b60ecdc, name: "index" } ], fallback: false }) } |
routesプロパティ配下に下記のオプションを指定することで、URLのルーティング設定ができます。
| オプション | 説明 |
|---|---|
| path | pagesディレクトリ配下のパスを指定します。 |
| name | pagesディレクトリ配下のファイル名を指定します。 |
動的にルーティングさせるには？
pages/index.vue
|
1 2 3 4 5 6 7 |
<template> <section class="container"> <div> <nuxt-link to="articles/1">User</nuxt-link> </div> </section> </template> |
pages/articles/_id.vue
動的な値を使うには、ファイル名か、ディレクトリ名に「_」（アンダースコアのプレフィックス）をつけます。
|
1 2 3 4 5 |
<template> <div> id:{{ $route.params.id }} </div> </template> |
また、遷移先のページでは、「{{ $route.params.id }}」というように指定すれば、動的な値を画面に表示させることができます。
実行結果
この記事へのコメントはありません。