異端開発室

ルーターインスタンスを作成する際、historyオプションによって異なる履歴管理モードを選択できます。 Hashモード URLの形式 URL内にハッシュ文字（#）を含み、例えばhttp://example.com/#/profileのような形式になります。 サーバー設定 サーバー側の特別な設定は不要です。ハッシュ以降の部分はサーバーに送信されないため、バックエンドでの処理が求められません ...

概要 Django REST Framework（DRF）をバックエンドに据えたシングルページアプリケーション（SPA）では、ブラウザの同一オリジンポリシーとCSRF保護をどう両立させるかが重要になる。単純に@csrf_exemptを付けるとセキュリティが低下するため、以下の2パターンで安全にトークンを付与する手法を紹介する。 パターンA：Cookieベースの自動付与 DRF標準のCSRF_USE_SESSIONS ...

シングルページアプリケーションと URL 同期の課題 現代の Web 開発において、シングルページアプリケーション（SPA）は標準的なアーキテクチャとなっています。SPA では、ページ遷移ごとにサーバーから HTML を取得するのではなく、Ajax 通信によってデータのみを取得し、クライアント側で DOM を更新することで视图の切り替えを実現します。これにより、ユーザー体験は向 ...

jQuery以前の時代、フロントエンドエンジニアはルーティングの概念を理解する必要がありませんでした。ページ遷移はすべてバックエンドがテンプレートを再描画することで処理していました。この開発スタイルではフロントエンドがバックエンドに依存し、開発スピードは速く、バックエンドが一部のフロントエンドタスクを担当することも可能でした。ただし、プロジェクトの分 ...

1. Vue Routerの概要 Vue Routerは、Vue.js公式のルーティング管理ライブラリです。Vue.jsのコアと深く統合されており、シングルページアプリケーション（SPA）の構築を容易にします。主な機能には以下のものがあります： ネストされたルート/ビュー階層 モジュール化されたコンポーネントベースのルート設定 ルートパラメータ、クエリ、ワイルドカード Vue.jsト ...

Vue Routerはシングルページアプリケーション(SPA)におけるコンポーネント間のナビゲーションを管理するためのVue.js公式ルーティングライブラリです。本記事ではVue Routerの基本的な使い方と主要機能について解説します。 Vue Routerとは Vue Routerは、従来のマルチページアプリケーションで使用されるサーバーサイドルーティングとは異なり、クライアントサイドでのル ...

ステップ1: ルーターのインストール npm install vue-router --save ルーティング設定の基本構文 router/index.js での設定 import Vue from "vue"; import Router from "vue-router"; import HelloWorld from "@/components/HelloWorld"; Vue.use(Router); export default new Router({ routes: [ { path: "/sample", component: SampleComponent, ...

Vue 3 アプリケーションでページ遷移を実現するには、公式ルーティングライブラリである vue-router@4 を導入・構成します。本稿では、最小限の動作を担保する基本設定から、動的ルーティング、ナビゲーション制御までを実践的に解説します。 1. ライブラリのインストール プロジェクトに vue-router を追加します： npm install vue-router@4 yarn add vue-router@4 2. ...

Vue.js を使用して開発したアプリケーションを本番環境にデプロイした際、history モードを利用していると、ページをリロードしたときに 404 エラーが発生することがよくあります。これは、クライアントサイドルーティングで生成された URL に対して、サーバー側が対応する静的ファイルを返せないために起こります。以下では、Vue プロジェクトと Nginx の設定を調整するこ ...

原理 ボタンクリック/ルートトリガー → パス変更 → routerによる検知 → router/index.jsの設定ルールに基づき対応ページへ遷移 基本的な使用法 対応するSPAコンポーネント（vueページ）を作成 ---AboutPage.vue--- <template> <h2>Aboutページのコンテンツ</h2> </template> <script> export default { name: 'AboutP ...