Ссылки Vue.js не кликабельны, а домашний компонент не загружается по умолчанию

Question

Хорошо, я только начинаю с vue.js. Я добавил проект TypeScript vue.js в выходящее решение Visual Studio 2017. Из коробки, которая работала довольно хорошо.

Но сейчас я пытаюсь сделать что-то, что должно быть довольно простым ... создать несколько страниц и перемещаться между ними. Я нашел 3 или 4 учебника, но ни один из них не соответствует тому, что я уже сделал, чтобы сделать их адаптируемыми, и мне трудно найти то, что мне нужно в документации vue.js.

Вот скриншот того, как мой проект выглядит прямо сейчас ...

А вот файл App.vue:

А это файл router / index.js:

Со всем этим, вот что отображается в браузере:

Это почти правильно, за исключением двух вещей:

1) Ссылки для Home и Time Sheet не отображаются в виде интерактивных HTML-ссылок. Вот как они выглядят в инструментах разработчика:

2) Я думал, что компонент Home будет загружен по умолчанию, но это не так.

Итак, два вопроса:

1) Как сделать ссылки кликабельными?

2) Почему Home не загружается по умолчанию?

EDIT:

Вот файл main.ts:

Answer 1

Вам также необходимо настроить vue-router в файле main.js. Вот пример:

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