<router-view></router-view>渲染空白,但没有任何错误提示？

Question

初接触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);

//守卫
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) => {
  //后续收尾
  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运行后 空白页,
请帮忙分析一下问题,谢谢！

Answer 1

这种错误多半是要插入的组件有错误，导致渲染不出来，但是错误信息被吃掉了。解决方案是直接渲染那个组件，不通过 vue-router，就能看到错误，然后排除掉，即可。

Answer 2

是不是对应的id写错了?

Answer 3

建议楼主参考https://segmentfault.com/a/11...