menu
書いてる野郎
orebike@gmail.com
コンテンツを追加してメニューをクリックすることによってそのコンテンツ間を移動できるようにしてみる。 つまり Vuetify に Vue Router を組み込むということである。
内容を用意する。
document.addEventListener("DOMContentLoaded", function(e){ console.log("vue start"); const router = new VueRouter({ routes: [ { path: '/hogehoge', component: { template: '<div>hogehoge</div>' } }, { path: '/piyopiyo', component: { template: '<div>piyopiyo</div>' } } ] }); new Vue({ router: router }).$mount("#app"); });
そしてこのようにリンクを生成するコンポーネントと、それを表示するコンポーネントを埋め込めば動作する。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Hello</title> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <script src="https://unpkg.com/vue@latest"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> <script src="index.js"></script> </head> <body> <div id="app"> <v-app> <v-navigation-drawer v-bind:permanent="true" v-bind:fixed="true" v-bind:app="true"> <v-list> <router-link to="/hogehoge"> <v-list-tile> <v-list-tile-action> <v-icon>home</v-icon> </v-list-tile-action> <v-list-tile-content> <v-list-tile-title>hogehoge</v-list-tile-title> </v-list-tile-content> </v-list-tile> </router-link> <router-link to="/piyopiyo"> <v-list-tile> <v-list-tile-action> <v-icon>flight</v-icon> </v-list-tile-action> <v-list-tile-content> <v-list-tile-title>piyopiyo</v-list-tile-title> </v-list-tile-content> </v-list-tile> </router-link> </v-list> </v-navigation-drawer> <v-content> <v-container> <router-view></router-view> </v-container> </v-content> </v-app> </div> </body> </html>