Vue.jsプロジェクトをサブディレクトリで配信するときの注意点 - Qiita
はじめに この記事は以下の説明をしているものです。 vue-cliでビルドした静的ファイルを配信する方法(Nginx) vue-cliでビルドした静的ファイルをサブディレクトリで配信する方法(Nginx) 環境 vue 2.5.17 vue-cli 3.1.1 vue.js (vue-cli) でビルドした静的ファイルをnginxで配信する vue-cliはハッシュモードとヒストリーモードを設定できます。 デフォルトはハッシュモードであり、vue-cliでプロジェクトを作るとデフォルトではURLが https://example.or.jp/#/ のように勝手に#がついているのが分かります。 URLが変化したときにブラウザのリロードにもしっかり対応してくれるのでラクなのですが、見た目があまりよろしくないのでヒストリーモードにします。 しかし、ヒストリーモードではvue-cliで作った静的フ
Vue router を使った時の GitHub Pages での 404 対策 - Qiita
どんな問題？ vue-router は SPA なので / 以外のページを直接叩きに行くと 404 する。 自分で nginx なんかでデプロイする場合は try_files /index.html とかで綺麗に解決するが、 GitHub Pages だとこの設定はできない（たぶん）。 普通に / 以外のページに行ったあと F5 するだけで 404 するのでけっこうキツい。 追記 GitHub Pages では SPA ではなくMPA にするほうがよさそう。 MPA にすれば複数 index.html ができるので以下の対策は必要ない。 対策方法 GitHub Pages は 404.html があると使ってくれるので、 404.html にスクリプトを仕込んでそこから /#/hoge/fuga/ へリダイレクトする（これで / がロードされる）。 / 側では Vue が動く前に URL
Vue.jsで404や500エラーページの制御がしたい - Qiita
404エラーページ Vue Routerを利用して制御する。 ワイルドカードのパスを作ることで、どのパスにもマッチしなかった時のビューに飛ばすことができる。 サブディレクトリで使う404ビューを変えることもできる。 import Vue from 'vue' import VueRouter from 'vue-router' import Index from '@/views/Index' import NotFoundError from '@/views/errors/404' import FooNotFoundError from '@/views/errors/foo/404' import BarNotFoundError from '@/views/errors/bar/404' Vue.use(VueRouter) const routes = [ { path: '/
Vue3の新機能Suspenseで非同期を使った表示処理をスマートに記述しよう
Vueの新バージョン3で登場した新機能の一つが、Suspenseです。これは、ネットワークなどの非同期処理実装時において、その処理前やエラーハンドリングを簡単にしてくれる機能になります。使い方をマスターすれば、非同期処理の伴う表示処理が簡潔に書けるようになるでしょう。 これまでの非同期処理の書き方 例えば、非同期処理で取得したデータをもとに、データの一覧表示を行うコンポーネント（DataTable）があったとします。この場合、DataTableは次のような処理を実装すると思います。 呼び出された直後に「読み込み中…」というラベルを表示する 非同期処理がうまくいった時に、データを一覧表示する 非同期処理が失敗した時に、「エラーが発生しました」というラベルを表示する 呼び出し元になる親コンポーネントは、データを一覧表示するコンポーネントがどのようなステータスにあるのかまったく関知しない形になり
コンポーネント内部での画面遷移 Vue.js備忘録 vol.02 - Qiita
はじめに 前回に引き続き、vue.jsを触ってみて詰まった所などを備忘録としてまとめてみます。 Vue.js（SPA）におけるブラウザバック問題 SPAでの実装に慣れている方からすると初歩的なミスかもしれないが… このような画面遷移を行なっていた時 /hoge⇨/fuga⇨/fuga?page=2 ブラウザバックを行うと /fuga?page=2から/hogeに戻ってしまっていた。 考えられる原因 ページネーションでの遷移がhistory.replaceState()だった（現在の履歴エントリーを新しい履歴エントリーに置換する設定） history.pushState()にしたらいけるのでは！？！？ history.pushStateにしたものの… URLは/fuga?page=2⇨/fugaへ変わるが、画面が再描画されない！！ 今回作成していたページはAPIを叩いて一覧表示していたため、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue で scrollBehavior が効かないときの対処法 - Qiita
【Vue.js】Vue Routerとは？使い方と実例 - Qiita
vue-routerのrouter.goがsafariで機能しない時の対処法 - Qiita
VueRouter基本ルーティング記法まとめ
