【Vue.js Nuxt.js】プロジェクトのrootpathを特定のページへ変更する

こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。

このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。

今回は、

• 【Vue.js Nuxt.js】プロジェクトのrootpathを特定のページへ変更する

について書いていきます。

【Vue.js Nuxt.js】プロジェクトのrootpathを特定のページへ変更する

やりたいこと

プロジェクトルートURL(例: localhost:3000 or localhost:3000/)でアクセスされたら、

特定のページ(例: /articles)に遷移させたい。

（プロジェクトルートのページを変更したい）

.Nuxt/配下のrouter.js内にあるbaseプロパティや、

path: '/' の箇所を見てみたのですが上手くいかなかった。

結論

'' と '/' にマッチさせてリダイレクトするようにしました。

（他に良い方法があれば教えてください...）

下記は、

localhost:3000 がrootとして、

localhost:3000 or localhost:3000/ にアクセスされたら /articles(例. 記事一覧) へリダイレクトするサンプルです。

// layouts/default.vue
<template>
  <div>
    <nuxt />
  </div>
</template>

<script>
export default {
  created() {
    const toRootStrs = (['', '/']) 

    // 現在のパスが ''と'/'にマッチしたら /articles へリダイレクト
    if (toRootStrs.includes(this.$route.path)) {
      this.$router.push({ path: '/articles' })
    }
  }    
};
</script>

• vue-router APIリファレンス

router.vuejs.org

Vue.jsやフロントエンドを学習したい方へ

自分の場合、

React.js、Vue.js、TypeScriptはUdemyの下記コースで学習しました。

✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

✅Vue.js + Firebaseで作るシングルページアプリケーション

✅ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門