# 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 取得できるライフサイクル
asyncDatafetchpluginsmiddlewarenuxtServerInit
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