index

    <html typeof="">
    <head>
        <title>
            Hi From Vue
        </title>
    </head>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
    </style>
    <body>

    <div id="app">
        <p>
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
            <router-link to="/books">Books</router-link>
            <router-link to="/vuex">Vuex</router-link>
        </p>

            <router-view></router-view>


    </div>


        <script type="text/javascript"  src="vue.js"></script>
        <script type="text/javascript"  src="vue-router.js"></script>
        <script type="text/javascript"  src="vuex.min.js"></script>
        <script type="module">

            import {BookComponent} from "./BookComponent.js";
            import {Book} from "./Book.js";
            import {Clicker} from "./Clicker.js";


            const store = new Vuex.Store({
                state : {
                    umur : 17,
                },
                mutations :{
                    increment(state){
                        state.umur++
                    }
                }

            })
            const Home = {template:'<div>hai ini home</div>'}
            const About = {template:'<div>hai ini about</div>'}

        const routes = [
            {path : "/" , component : Home},
            {path : "/about" , component : About, meta : {login : true}},
            {path : "/books" , component : BookComponent },
            {path : "/book/:id" , component : Book , alias : '/book',props:true },
            {path : "/vuex",component: Clicker }
        ];

        const router = new VueRouter ({
            routes
        })
            router.beforeEach((to,from,next) => {
                if (to.matched.some(record => record.meta.login)) {
                    alert('Halaman ini hanya untuk user yang sudah login!')
                    next('/')
                }

                else {
                    next();
                }
            })
                var vm = new Vue({
                el : '#app',
                router,

                    components : {
                        'Clicker' : Clicker,
                    }


            })

        </script>

    </body>
</html>