Vue Routerを使ってみる
今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。 参考：Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。
|
1 2 3 |
vue create <project name> cd <project name> npm install vue-router |
で準備を整えたら、必要な設定をしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
└── src ├── App.vue ⭐️ ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js⭐️ ├── router.js⭕️ └── views ├── Bar.vue⭕️ └── Foo.vue⭕️ |
コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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をプラグインとして登録します。
|
1 2 3 4 5 6 7 8 9 10 11 |
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が動くようになります。
|
1 2 3 4 5 |
<template> <div id="app"> <router-view></router-view> </div> </template> |
