初接觸vue,vue-router <router-view></router-view>渲染空白,但沒有任何錯誤提示,下面是代碼:

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import {router} from './router'
import store from "./store";

Vue.config.productionTip = false
new Vue({
  el: '#idx',
  router: router,
  store: store,
  render: function (h) {
    h(App);
  }
})

router 的index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import iView from 'iview';
import Cookies from 'js-cookie';
import Util from '../utils/util';    
import {loginRouter} from './router';//引入路由

Vue.use(VueRouter);
const RouterConfig={
  routes: [loginRouter]
};
export const router =new VueRouter(RouterConfig);

//守衛(wèi)
router.beforeEach((to,from,next)=>{
  iView.LoadingBar.start();
  //前序攔截
  if(to.name==='login'){
    console.log("next");
    next();
  }else{
    console.log("next({name: 'login'})");
    next({name: 'login'});
  }
});
router.afterEach((to) => {
  //后續(xù)收尾
  iView.LoadingBar.finish();
  window.scrollTo(0, 0);
});

router.js

export const loginRouter = {
  path: '/login',
  name: 'login',
  meta: {
    title: 'Login - 登錄'
  },
  component: resolve => { require(['@/components/login.vue'], resolve); }
};

login.vue 在components

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>    
<script>
export default {
  name: 'login',
  data () {
    return {
      msg: 'Login'
    }
  }
}
</script>

以上 dev運行后 空白頁,
請幫忙分析一下問題,謝謝！