vue-router API 이해해보기

Vue router 라이브러리를 사용하기 전에 

 

Vue router가 어떤것인지에 대한 개념에 대한 공부가되었다.

import Vue from "vue";
import App from "./App.vue";

const Login = { template: "<div>Login Page</div>" };

const routes = {
    "/": App,
    "/login": Login
};

new Vue({
    el: "#app",
    computed: {
        VueComponent() {
            return (
                routes[window.location.pathname] || {
                    //url 경로를 반환
                    template: "<div>Page not found </div>"
                }
            );
            //path경로에 해당하는것을 routes에서 찾고 반환
        }
    },
    render(h) {
        return h(this.VueComponent);
    }
});

 

 

기본 페이지