# 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
  }
}