【Vue.js 2.9】はじめてのVue Router リダイレクト・エイリアス

・リダイレクトとエイリアスの記述方法の紹介

はじめに

今回はリダイレクトやエイリアスのVue Routerでの書き方の紹介となります。

【Vue.js 2.9】はじめてのVue Router 環境構築・HelloWorld出力・Vue.jsでSPAを構築するのに特化した公式ライブラリの紹介・環境構築とページにHelloWorld出力はじめに今...

環境情報

名前	詳細
Vue.js	開発バージョン（`https://unpkg.com/vue/dist/vue.js`）
Vue Router	開発バージョン（https://unpkg.com/vue-router/dist/vue-router.js）
エディタ	VSCode（https://code.visualstudio.com/）

リダイレクト

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Redirect - Vue Router</title>
  </head>
  <body>
    <div id="app">
      <router-link to='/'>Home</router-link> /
      <router-link to='/a'>A</router-link> /
      <router-link to='/b'>B</router-link>
      <router-view></router-view>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
      const B = {
        template: '<div><h1>BBB</h1></div>'
      }
      const router = new VueRouter({
        routes: [
          {
            path: '/a',
            redirect: {name: 'page-b'}
          },
          {
            name: 'page-b',
            path: '/b',
            component: B
          }
        ]
      })
      const app = new Vue({
        router
      }).$mount('#app')
    </script>
  </body>
</html>

画像だと分かりにくいですが、Aのリンクを押したらBにリダイレクトされました。
この場合、URLは「/a」ではなくリダイレクト先の「/b」となります。

Vue側のリダイレクトの定義は24行目の「redirect: {name: ‘page-b’}」です。
「/a」のリンクに対して、名前付きルート「page-b」にリダイレクトされます。

エイリアス

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Alias - Vue Router</title>
 </head>
 <body>
   <div id="app">
     <router-link to="/">Home</router-link>
     <router-link to="/a">A</router-link>
     <router-link to="/b">B</router-link>
     <router-view></router-view>
   </div>
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   <script>
     const A = {
       template: '<div><h2>AAA</h2></div>'
     }
     const router = new VueRouter({
       routes: [
         {
           path: '/a',
           component: A,
           alias: '/b'
         }
       ]
     })
     const app = new Vue({
       router
     }).$mount('#app')
   </script>
 </body>
</html>