Vue Routerでリダイレクトする

この記事は2021年01月27日に投稿しました。

1. はじめに
2. Vue Routerでリダイレクトする
3. おわりに

リンク

1. はじめに

こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVue Routerでリダイレクトする方法についてです。

目次へ

2. Vue Routerでリダイレクトする

Vue Routerでリダイレクトする方法ですが、以下の手順になります。
Vue CLIプロジェクトが対象になります。

1.画面コンポーネントを作成します。

Home.vue

<template>
  <div>ホーム画面</div>
</template>

<script>
export default {
    name: 'Home',
};
</script>

2.src/route.jsを以下の内容で作成します。

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from './Home';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        component: Home,
    },

    // '/main'の場合は'/'にリダイレクトします。
    {
        path: '/main',
        redirect: '/',
    },
];

const router = new VueRouter({
    mode: 'history',
    routes: routes,
});

export default router;

3.src/App.vueを以下の内容で修正します。

<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App',
};
</script>

参考

Vue

Vue CLI

Vue Router

目次へ

3. おわりに

Vue Routerのリダイレクトは簡単です。

リンク

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

---

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ