Vue.js/Nuxt.jsで画面遷移

pagesディレクトリに作成したvueファイルはすべて自動的にルーティングに登録される!
すばらしい♪

ページ作成

sampleレイアウトで会社概要ページとお問い合わせページを作成。

pages/about.vue

お問い合わせページ
pages/contact.vue

画面遷移のリンク作成

コンポーネントのSampleHeder.vueを修正。

<nuxt-link to=”[url]”>でアンカーリンクが作成されるのね。

components/SampleHeader.vue

動的ルーティング

pagesディレクトリ以下でファイル名またはディレクトリ名にアンダースコアのプレフィックスを付けることで動的ルーティングが自動生成されるよ。

例えば、http://localhost:3000/user/[ID] で[ID]が動的に変化する場合

[ID]は $route.params.id で取得できる。

pages/user/_id.vue

※export文で使用するときはthisが必要なのね。

pages/user/_id.vue

シェアする

  • このエントリーをはてなブックマークに追加

フォローする