スリ飯屋Malankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

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

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




今すぐ登録したい方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1位】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




こんにちは、mahです。


このブログでは、

僕が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


  • プログラムによるナビゲーション

router.vuejs.org




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


自分の場合、

React.jsVue.jsTypeScriptはUdemyの下記コースで学習しました。


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

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

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


f:id:mah666hhh:20200815162919p:plain


f:id:mah666hhh:20200815162939p:plain


f:id:mah666hhh:20200815162951p:plain




最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech




最後までお読み頂きありがとうございました★

もしよかったらTwiiterのフォローもお願いします★