vue-router访问默认组件

Question

使用vue-router设置默认访问组件，组件内容不显示的问题

代码设置默认组件访问路径，但是浏览器界面不显示的问题

相关代码

在router文件夹下创建两个js文件，一个router.js,一个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)
})

你期待的结果是什么？实际看到的错误信息又是什么？

login.vue的相关代码：
<div class="login">

<h1>登录</h1>

</div>
期望可以看到在login.vue实现的界面样式，目前界面是空，什么都不显示，请问是什么原因导致的这个问题？

Answer 1

你的App.vue组件有router-view吗