Почему компонент в маршрутах vue -router не имеет значения

Question

У меня есть App компонент, и он хорошо отрисовывается. В основном это компонент, состоящий из двух компонентов.

App (Vue component):
    1. Navigation // a menu bar with menu items 
                  //like <router-link to="/">Home</router-link> 
                  //like <router-link to="/contact">Contact</router-link> 
    2. Library    // a component listing books.

Я хочу добавить еще один компонент Contact, который я пытался добавить, используя vue -router, поэтому я использую вышеуказанный компонент навигации. Тем не менее, маршруты, кажется, ничего не влияют Что я делаю не так?

Мой главный. js файл

const Contact = {
  template: '<div>Contact Us</div>'
}

const routes = [
    { 
        path: '/', 
        component: App        // any change here also does not make any difference!!!
    },
    {
        path: '/contact',
        component: Contact,   // this or any component doesnt make any difference!!!
    }
];

const router = new VueRouter({
    routes,
});

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')