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にブロックチェーンエンジニアとして入社。
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す