Vue 怎么将组件正确渲染

Question

路由器

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

页面在进入的时候并不加载登录

请问怎么才能让代码正常加载我的组件

原来用的react,现在项目需要求用vue 可能是我的思维没转换过来.
vue非得要写一个标签在html上,不能像react那样封装成一个对象,import一下,然后直接调用这个对象就可以渲染那种
或者说VUE是不是不太适合单页面应用

Answer 1

文档读了吗？
路由懒加载
异步组件

Answer 2

你这个思路有点混乱，推荐你先用vue-cli建一个demo看看

Answer 3

routes: [
      {
      path: '/',
      component: Index,
      children:[
        {path:'/home',component: Home},
        {path:'/about',component: About},
        {path:'/find', component: Find},
        {path:'/mine',component: Mine},
        {path:'/',redirect:'home'}  //重定向到home
      ]
    },

Answer 4

vue.js + Vue Router 创建单页应用，是非常简单的

vue-route 文档里面就说了。