Vue.js/個人サイトを作ってみる/040_ページ遷移する

Vue.js/個人サイトを作ってみる/040_ページ遷移する

コンテンツを追加してメニューをクリックすることによってそのコンテンツ間を移動できるようにしてみる。 つまり 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>
javascript/vuejs/create_my_site_with_vuetify_and_vue_router/040_switch_other_page.txt · 最終更新: 2019-01-31 18:54 by ore