# web 開発でよく使うリダイレクトと nuxtjs redirect

web 開発で必ず出てくるリダイレクトの話をまとめてみました!
Http redirect ならよく使う 301 と 302 など永久と一時的リダイレクト
恒久リダイレクトと一時的リダイレクトの区別は検索エンジンは自身のリンクを更新するかどうか
リダイレクトコードで恒久リダイレクトか一時的リダイレクトかを検索エンジンに知らせて HP の移行か、一時的遷移かを判断してくれるので、LP リニューアルなどは 301 恒久リダイレクト使うのが一般的。

# HTTP リダイレクトコード

コード 種類 メモ
301 恒久的リダイレクト HP 移行時
302 一時的リダイレクト 一時エラーなど
303 一時的リダイレクト リロード再実行防ぐためのリダイレクト
304 特殊リダイレクト 再検証された条件付きリクエストのために送信

# HTML HEAD リダイレクト

<head>
  <!-- <meta http-equiv="refresh" content="秒数;URL=URL"> -->
  <meta http-equiv="refresh" content="0; URL=http://www.example.com/" />
</head>

# javascript リダイレクト

window.location = "https://www.example.com/";

# Apache 設定リダイレクト

<VirtualHost *:443>
	ServerName example.com
	Redirect / https://www.example.com
</VirtualHost>

# htaccess リダイレクト

RewriteEngine On
RewriteCond %{http_host} ^www.old-domain.com

# 301
RewriteRule ^(.*) https://www.new-domain.com/$1 [R=301,L]

# 302
RewriteRule    ^page.htm$    new_page.htm    [R,NC,L]

## SSLリダイレクト
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# www から www なしにリダイレクト
RewriteCond %{HTTP_HOST} ^www\.domain\.com
RewriteRule (.*) http://domain.com/$1 [R=301,L]

# Nginx 設定リダイレクト

server {
	listen 80;
	server_name example.com;
	return 301 $scheme://www.example.com$request_uri;
}

# php リダイレクト

header('location: https://example.com');

# nuxtjs リダイレクト

nuxtjs の context 取得できるライフサイクルから redirect 利用

context 取得できるライフサイクル

  • asyncData
  • fetch
  • plugins
  • middleware
  • nuxtServerInit

sample

<template>
  <div></div>
</template>

<script>
export default {
  asyncData({ redirect }) {
    redirect("/order/step1");
  },
};
</script>

<style lang="scss" scoped></style>

# nuxtjs context について

context から取得できる値

  • app
  • store
  • route
  • params
  • query
  • env
  • isDev
  • isHMR
  • redirect
  • error

ソース

function (context) {
  // Universal keys
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error
  } = context
  // Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
  // Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }
}

SSR の場合

  • req
  • res
  • beforeNuxtRender

CSR の場合

  • from 遷移元
  • nuxtState

参考:HTTP のリダイレクト (opens new window)

2020-08-25
  • nuxtjs

関連記事

Nuxtjs 3 に Ant design Vue を使う
Nuxtjs build WARNING in entrypoint size limit
Nuxtjs axios リクエストのヘッダー設定
Nuxtjs titleTemplate の設定
Nuxt.js でフロントエンドのカテゴリ選択
楽天 GOLD に Nuxt で作った HP デプロイ公開した話
localStorage is not defined に遭遇した時の対応
nuxtjs の wpa を実装した時のメモ
vuejs スクロールでナビバー表示非表示
nuxtjs のページごと head の title description 変更
Nuxtjs に iview 4.0 入れた動かしてみた