vue.js + NuxtJSを初めてみる

ルーティング

Nuxt

多くのウェブサイトでは単一のページではなく、複数ページを持っています。例えばホームページ、概要ページ、お問い合わせページ…

基本は、pagesディレクトリにあるvueファイルの階層にしたがってルーティングが自動生成される。

結構細かい設定があるみたいなので、公式ドキュメントも参考に。

ここに↓とありますが、なんででしょう・・・aリンクを使うとダメなのか。

ページ間を遷移するためには <nuxt-link> コンポーネントの使用を推奨します。

動的なURLを設定したい

この場合アンダースコアのプレフィックスをつけたvueファイルを用意します。

pages/users/_id.vue

// バリデーション
export default {
  validate ({ params }) {
    return /^\d+$/.test(params.id)
  }
}

idのパラメータに設定した値で動的なURLを作成することができます。

また、このファイル内で、このパラメータに対して正しく無いURLでアクセスした場合には、404/500エラーページに遷移させるためにバリデーションを設定できます。

トランジション

transitiionコンポーネントを使うと、ページ間を遷移する際のトランジション/アニメーションができます。

これはオシャレなサイトによくある機能が簡単にできるということでしょうか。


Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658