# ReferenceError: location is not defined

 [Vue warn]: Error in render: "ReferenceError: location is not defined"

ssr レンダリングする際に出る location is not defined エラーは javascript ブラウザー側しか稼働しない location を ssr レンダリングされた際に出るエラー

MDN の location についての解釈

Location インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。
Location に対して変更が行われると、関連するオブジェクトに反映されます。
Document インターフェイスおよび Window インターフェイスにはこのような関連付けられた Location があり、それぞれ Document.location および Window.location でアクセスできます。

# 因みに location プロパティ

  • href
  • protocol
  • host
  • hostname
  • port
  • pathname
  • search
  • hash
  • username
  • password
  • origin

# メソッド

  • assign
  • reload
  • replace
  • toString

# エラー対応

  1. ブラウザー側にレンダリングさせる
 



if (process.browser) {
  var href = location.href
}
  1. mounted 後に実行させる
mounted() {
   var href = location.href
}
  1. no-ssr client-only 指定
2020-06-21
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
開発におけるコーディングルール・規約