【Vue.js】VueRouterで転送(リダイレクト)を設定する方法を実例で解説｜名前付きルートへのリダイレクト方法＆エイリアスとは何か？

vue-js-prograshi（プロぐらし）-kv Vue.js
2023/8/22
記事内に広告が含まれていることがあります。

Vue.jsの公式ライブラリVueRouterを使うとSPAのアプリケーションやサイトを簡単に作成することができます。

その際、古いページをリニューアルしたときなど、新しいページに転送（リダイレクト）したい場合があります。

VueRouterではとても簡単に転送設定をすることができます。ここではその方法について、名前付きルートの場合も含めまとめています。


転送(リダイレクト)を設定する方法

転送(リダイレクト)を設定するには、転送をかけたいルートの中にredirect: '転送先のルートのパス'を記述します。

すると、該当するルートにアクセスしたときに、自動的にredirectで設定したページに転送されます。

ルートの記述は以下のようになります。

 const router = new VueRouter({
        routes: [
          {
            //リダイレクトの設定
            path: 'パス',
            component: htmlの内容,
            redirect: 'リダイレクト先のパス'
          }
        ]
      })


転送(リダイレクト)の設定方法実例（パスで指定）

パスが「/old」の古いページを、新しいページ「/new」にリダイレクトする場合は以下のようになります。

.jsファイル

//コンポーネントの中身
const OldPage = { template: '<p> 古いページです。 </p>'}

const NewPage = { template: '<p> 新しいページです。 </p>'}


//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/old',
      component: OldPage,
      redirect: '/new'
    },
    {
      path: '/new',
      component: NewPage,
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')

redirect: '/new'を記述したことで、「/old」にアクセスすると、「/new」のコンポーネントを表示します。

.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router</title>
</head>
<body>
    <div id="app">
      
        <!-- Userコンポーネントへのリンク -->
        <router-link :to="/old">・古いページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>
</html>


ブラウザの表示

デフォルトでは「古いページ」へのリンクのみが表示されています。

　↓ リンクをクリック

「/new」にアクセスしたのと同じ内容が表示されます。


名前つきルートの転送（リダイレクト）の方法

ルートにnameプロパティでルート名が付けられている場合は、ルート名を使ってリダイレクトの設定ができます。

その際の記述は以下のようになります。

redirect: { name: '転送先のルート名'}


実例

ルート名が「PreviousPage」という古いページを、ルート名「RenewalPage」にリダイレクトする場合は以下のようになります。

.jsファイル

//コンポーネントの中身を定数として作成
const OldPage = { template: '<p> 古いページの内容です。 </p>'}

const NewPage = { template: '<p> 新しいページの内容です。 </p>'}


//VueRouterインスタンスの生成
const router = new VueRouter({
  routes: [
    {
      path: '/old',
      component: OldPage,
      name: 'PreviousPage',
      redirect: { name: 'RenewalPage' }
    },
    {
      path: '/new',
      name: 'RenewalPage',
      component: NewPage,
    }
  ]
})

//Vueインスタンスの生成
const app = new Vue({
  router
}).$mount('#app')

redirect: { name: 'RenewalPage' }を記述したことで、ルートパス「/old」またはルート名「{ name: ‘PreviousPage’ }」にアクセスすると、ルート名「RenewalPage」のコンポーネントを表示します。

.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router</title>
</head>
<body>
    <div id="app">
      
        <!-- Userコンポーネントへのリンク -->
        <router-link :to=" { name: 'PreviousPage' } ">・古いページ</router-link>

    　　<!-- コンポーネントの表示領域 -->
        <router-view></router-view>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
</body>
</html>


ブラウザの表示

デフォルトでは「古いページ」へのリンクのみが表示されています。

↓ リンクをクリック

ルート名「RenewalPage」にアクセスしたのと同じ内容が表示されます。


URLそのままで違うページの内容を表示する方法（エイリアスの設定）

リダイレクトと似た処理に、alias（エイリアス）というものがあります。

ルートの中でalias(エイリアス)プロパティを設定すると、URLはpathのままで、内容はaliasで指定したパスのコンポーネントの内容を表示することができます。

aliasとは？

aliasとは、「別名」という意味の英語です。エイリアスと呼びます。

alias: '表示するコンポーネントのパス'

 const router = new VueRouter({
        routes: [
          {
            //エイリアスの設定
            path: '/old-page',
            component: oldPage,
            alias: '/new-page'
          },
          {
            path: '/new-page',
            component: newPage
          }
        ]
      })

「~#/old-page」にアクセスすると、URLはそのままで、「~/#new-page」の内容を表示します。


タイトルとURLをコピーしました