More than 5 years have passed since last update.

vue-router.js を cdn で使う

Vue.js

Posted at 2019-01-10

コピペで動きます。
テンプレートも外部ファイル化しておきます。

main.js


var page1 = '<div>ページ１を表示</div>';

welcome.blade.php


<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel-Vue-todo</title>
    <style type="text/css">
        /*初期表示時にテンプレートが一瞬表示されてしまうのを防ぐ*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>


<h3>タイトル！（※書き換わらない）</h3>
<div id="app" v-cloak>
    <router-link to="/page1">トップページ</router-link>
    <router-link to="/page2">ユーザー一覧ページ</router-link>
    <router-view>(ここにコンテンツが表示される)</router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="{{ asset('/js/main.js?hogde') }}"></script>


<script>


    // var page1 = '<div>ページ１を表示</div>';
    var page2 = '<div>ページ２を表示</div>';


    var router = new VueRouter({
        mode:'history',
        // base:'/app/public/',
        routes: [
            {
                path: '/page1',
                component: {
                    <!-- ここにページ１のコンテンツを設定(変数page1を設定しています) -->
                    template: page1
                }
            },
            {
                path: '/page2',
                component: {
                    <!-- ここにページ２のコンテンツを設定(変数page1を設定しています) -->
                    template: page2
                }
            }
        ]
    });
    // routerをマウント
    var app = new Vue({
        el: '#app',
        router: router
    }).$mount('#app');



</script>

</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up