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')

显示页面空白

vue各路径,组件都没问题,但页面空白_第1张图片

解决:

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

vue各路径,组件都没问题,但页面空白_第2张图片

你可能感兴趣的:(VUE)