Vue Routerを使ってみる

今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。

参考:Getting Started(公式)

公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。

vue create <project name>
cd <project name>
npm install vue-router

で準備を整えたら、必要な設定をしていきます。

└── src
    ├── App.vue ⭐️
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js⭐️
    ├── router.js⭕️
    └── views
        ├── Bar.vue⭕️
        └── Foo.vue⭕️

コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。

route.js

このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ

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

// 作成したコンポーネントを読み込む
import Foo from './views/Foo'
import Bar from './views/Bar'

// Vue Routerというプラグインを導入
Vue.use(Router)

// ここでURLとコンポーネントのマッピングを行う
export default new Router({
    routes: [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ]
});

main.js

main.jsにてVue Routerをプラグインとして登録します。

import Vue from 'vue'
import App from './App.vue'
// routerをインポート
import router from './router';

Vue.config.productionTip = false

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

App.vue

最後にrouter-viewで読み込んで、Vue Routerが動くようになります。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Leave a Reply

Your email address will not be published. Required fields are marked *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)