Next.jsで作成したSPAアプリにおいて動的に変更されるパスに対応したページをリロードすると404 Not Foundになる問題への対応方法を記述する。
Nuxt.jsでは静的ファイル生成時には動的ルーティングに対応したルーティングが無視され、動的ルーティング用ファイルが生成されないため、この現象が発生する。
/list
というパスに対して、/list/index.html
というファイルが生成される。
// https://gist.github.com/think49/54b074cab2145efddb48765652c74710 | |
/** | |
* eval-calculation.js | |
* evaluate calculation formula. | |
* | |
* @version 1.0.0 | |
* @author think49 | |
* @url https://gist.github.com/think49/54b074cab2145efddb48765652c74710 | |
* @license http://www.opensource.org/licenses/mit-license.php (The MIT License) |
var token = '*********************'; // トークン | |
function doPost(e) { | |
var verificationToken = e.parameter.token; | |
if (verificationToken !== token) { | |
throw new Error('Invalid token'); | |
} | |
var translationText = e.parameter.text; | |
if (translationText === '') { |
var TARGET_LINES = [ | |
// [JR東日本] | |
// 東海道方面 | |
{name: '東海道線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'}, | |
{name: '京浜東北線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'}, | |
{name: '横須賀線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'}, | |
{name: '南武線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'}, | |
{name: '横浜線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'}, | |
{name: '伊東線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'}, | |
{name: '相模線', company: 'JR東日本', website: 'https://traininfo.jreast.co.jp/train_info/kanto.aspx'}, |
Nuxt.jsでaxiosモジュールを使って通信を行う場合、リクエストへ認証情報追加やエラーハンドリングなどの共通処理をaxiosプラグインに定義できる。
Vueコンポーネントなどでaxiosによる通信を行う場合はこれらの共通処理を利用することができるが、自作のAPIクラスでは利用できない問題を、APIを登録する自作プラグインの登録により解決する方法について記述する。
axiosを利用するAPIクラスを実装し、これをインポートして通信を行う。