使用vue-router設(shè)置默認(rèn)訪問組件，組件內(nèi)容不顯示的問題

代碼設(shè)置默認(rèn)組件訪問路徑，但是瀏覽器界面不顯示的問題

相關(guān)代碼

在router文件夾下創(chuàng)建兩個(gè)js文件，一個(gè)router.js,一個(gè)index.js,首先router.js代碼如下：
export const loginRouter = {
path: '/',
name: 'login',
title: '登錄',
meta: {index: 0},
component: ()=> import('@/components/login.vue')
};
export const routers =[
loginRouter,
]
index.js代碼如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import {routers} from './router'
Vue.use(VueRouter);

const RouterConfig = {
mode: 'history',
routers: routers
}
export const router = new VueRouter(RouterConfig);
然后main.js的代碼如下：
import Vue from 'vue'
import App from './App'
import {router} from './router/index';
import iView from 'iview';
Vue.use(iView);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router: router,
render: h => h(App)
})

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

login.vue的相關(guān)代碼：
<div class="login">

<h1>登錄</h1>

</div>
期望可以看到在login.vue實(shí)現(xiàn)的界面樣式，目前界面是空，什么都不顯示，請(qǐng)問是什么原因?qū)е碌倪@個(gè)問題？