vue-routerを導入してSPAを作成するzukucode主にWEB関連の情報を技術メモとして発信しています。Vue.jsvue-routerを導入してSPAを作成するVue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。モジュールのパスを絶対パスで指定する方法で扱ったものと同様とします。パッケージのインストール最初にvue-routerのパッケージをインストールします。vue-routerコンポーネントの作成SPAの制御を実装する前に動作確認用のページが必要なので3ページほど作成します。新しくpagesフォルダを作成し、この中にページのコンポーネントを作成します。</div></template>メインコンポーネントの修正App.vueで以下のようにrouter-linkとrouter-viewのコンポーネントを読み込みます。router-linkはナビゲーションのリンクでrouter-viewに表示しているページに応じたコンポーネントが表示されます。</div></template>routerファイルの作成vue-routerの設定をするファイルrouter.jsを作成します。ファイル名は自由に変更しても問題ありません。モジュールのパスを絶対パスで指定する方法で紹介した方法でImportは絶対パスで指定しています。router;エントリーポイントの修正エントリーポイントにvue-routerを読み込む処理を追加します。各リンクをクリックするとURLが変更されますが、ページ全体の再描画は行われずに、router-view内容がURLに対応したコンポーネントが表示されます。webpackでページごとにファイルを分割するvue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。現在のパスによってスタイルを変更するvue-routerでシングルページアプリケーションを作成する際に、例えばヘッダやサイドバーのナビゲーションで現在表示しているページのリンクを無効にしたり色を変えたりしたい場合があります。各ページ表示時に処理を行うvue-routerで各ページに遷移したタイミングで初期化などのメソッドをコールしたい場合があります。以下のようにbeforeRouteEnterで各ページ起動時に処理を行うことができます。ページ遷移時にアニメーションスクロールをするvue-routerでページ遷移するときにスクロールの位置をトップ(一番上)に移動させたいとき、公式サンプルにしたがって以下のように実装します。routerの値をwatchして、変更されたタイミングで...vueコンポーネントでvue-routerのページ制御を行うvueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネン...Electronとvue-routerを併用するときの注意点Electronとvue-routerを使うときに、ページ制御がうまく行かないときはrouterの設定を確認します。lessをImportしてビルドするhtmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...ExtractTextPluginでcssファイルを出力するwebpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...webpack-dev-serverで開発サーバーを起動するwebpack-dev-serverで開発サーバーを起動します。自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。システム日付をYYYYMMDD形式などの文字列型に変換する当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。