vue各路径，组件都没问题，但页面空白

App.vue

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
<style>
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
Vue.use(Router)

// const routes = [
// ]

const router = new Router({
  routes: [
    { path: '/', components: Login },
    { path: '/login ', name: 'login', components: Login }
  ]
})

export default router

Login.vue

<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="../assets/avatar.jpg" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {}
</script>
<style lang="less" scoped>
.login_container{
    background-color:#e5abbe;
    height: 100%;
}
.login_box{
    width: 450px;
    height: 300px;
    background-color:#fdeff2;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.login_box .avatar_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow:0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局样式表
import './assets/css/global.css'
Vue.config.productionTip = false

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

显示页面空白

解决：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
Vue.use(Router)

// const routes = [
// ]

const router = new Router({
  routes: [
    { path: '/', component: Login },
    { path: '/login ', name: 'login', component: Login }
  ]
})

export default router

一定要注意细节问题，components应该是component