[B! Nuxt][Vue] ar0のブックマーク

【Nuxt.js】Vue Router基礎編：params, queryを使ってページ遷移 | aLiz Nuxt

前置きとっても便利なparams, queryについてご紹介🌟 同じコンポーネントを見せたいけど、カテゴリごとにURLだけを変えたい… 一覧ページからソートして表示させたい… そんな時に便利です♪ params, queryについていくつかに分けて書きます✍️ router-linkが分かれば簡単です🌟 まだ不安な方のためにも複数の書き方で記載しました🍒

ar0 2021/06/30

Nuxt.js

リンク

Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す

前回の記事では画面遷移の仕方を紹介しました。画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。以下のように pageName=next というデータを nuxt-link から渡します。

ar0 2021/06/30

リンク

Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発

Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング（以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。特にUIの描画サポートに主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります

ar0 2021/06/30

リンク

【Nuxt.js】asyncDataの引数はContextというオブジェクトです - Qiita

asyncDataの引数について Nuxt.jsでよく使われる「asyncData()」メソッドの引数には、 Contextというオブジェクトが渡されてきます。例 export default { async asyncData ({ params }) { // ここでContextが引数に渡されてくる let { data } = await axios.get(`https://api-test/posts/${params.id}`) return { name: data.name } } } 参照：公式ドキュメント/非同期なデータ Contextとは Contextには、paramsやstore、route等の asyncData内で使用できるオブジェクトが入っています。 Contextの詳細については、公式ドキュメント/Contextに詳しく載っています。 asyncDat