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

App.vue

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

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