Vue 怎么將組件正確渲染

路由器

import Vue from 'vue';
import VueRouter from 'vue-router'
import Login from './login'
import Home from './home'

const routes=[
    {
        path:'/',
        component:Login
    },
    {
        path:'login',
        component:Login
    },
    {
        path:'home',
        component:Home
    }
]

const router=new VueRouter({
    routes
})

new Vue({
    router
}).$mount('#app')

登錄組件

import Vue from 'vue'

const Login={template:'<div class="login">登錄</div>'}

export default Login

頁面在進(jìn)入的時(shí)候并不加載登錄

請問怎么才能讓代碼正常加載我的組件

原來用的react,現(xiàn)在項(xiàng)目需要求用vue 可能是我的思維沒轉(zhuǎn)換過來.
vue非得要寫一個(gè)標(biāo)簽在html上,不能像react那樣封裝成一個(gè)對象,import一下,然后直接調(diào)用這個(gè)對象就可以渲染那種
或者說VUE是不是不太適合單頁面應(yīng)用