Vue.jsにVue Routerを導入してルーティングを行う方法




Vue Routerとは

簡単に説明すると、URLのパスに応じてSPAのページを簡単に切り替えるための仕組みを提供してくれます。

まずはインストール方法。yarnとnpmで書いてますが今はyarnが主流です。

$ yarn add vue-router
$ npm install --save vue-router

Vue Routerの導入

routerの設定

router/index.jsに書きコードを書きます。

pathに設定したURLになったときcomponentsに設定したページに切り替える設定をこのように書きます。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

// pages
import Login from '../pages/login'
import Top from '../pages/top'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/login',
            component: Login
        },
        {
            path: '/',
            component: Top
        }
    ]
})

vueの初期化

routerの設定をVueで使えるようにmain.jsに設定します。

import Vue from 'vue'
import router from './router'

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

Vueインスタンスを作るときに設定するだけです。

Componentsの設定

Vue Routerのフロントでの設定で大事なのはrouter-linkとrouteer-viewの2つだけです。

router-linkはrouter/index.jsで設定したpathで表示したいものを設定するだけです。

そのURLになったときにrouter/index.jsにpathと一緒に設定したcomponentがrouter-viewにレンダリングされるようになります。

<template>
  <v-app>
    <v-container justify-center>
        <v-layout text-md-center>
            <router-link to="/"></router-link>
            <router-link to="/login"></router-link>
            <router-view></router-view>
        </v-layout>
    </v-container>
  </v-app>
</template>

Vue Routerはまずはこの基本的な使い方は押さえておけば大丈夫です。

他にもpathに合わせてrouterを入れ子にしたり、リダイレクト機能、スクロール、遅延ローディングなど機能が豊富なので今後紹介していきたいと思います。

The following two tabs change content below.

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら




コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です