こんにちは、現役沖縄フリーランスエンジニアの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リファレンス
https://router.vuejs.org/ja/api/router.vuejs.org
- プログラムによるナビゲーション
https://router.vuejs.org/ja/guide/essentials/navigation.htmlrouter.vuejs.org
Vue.js
やフロントエンドを学習したい方へ
自分の場合、
React.js
、Vue.js、TypeScript
はUdemyの下記コースで学習しました。
✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
最後に
下記の表に、
フリーランスエンジニア向けの人気エージェントをまとめてみました。
エージェント選びで悩んでいる方は是非参考にしてみてくださいね★
| エージェント | 詳細 | 最高単価/月 | 設立 |
|---|---|---|---|
|
|
評判をチェック | 180万円/月 | 2011年 |
ギークスジョブ
|
評判をチェック
|
180万円/月 | 2011年 |
フォスターフリーランス
|
評判をチェック | 230万円/月 | 1996年 |
| pe-bank(pebank) | 評判をチェック | 200万円/月 | 1989年 |
|
Midworks(ミッドワークス) |
評判をチェック | 200万円/月 | 2013年 |
|
|
評判をチェック | 140万円/月 | 2005年 |
あわせて読みたい
