vueRouter没有报错，但是页面渲染空白

Question

我的index.js代码

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routers from './routers';
Vue.use(VueRouter);
const router = new VueRouter({
    routers
});
let div = document.createElement('div');
div.id = 'app';
document.body.appendChild(div);
new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

我的app.vue代码

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app',
        mounted() {
        window.addEventListener('resize', this.handleResize);
        this.handleResize();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            var w = document.documentElement.clientWidth;
            document.getElementsByTagName('html')[0].style['font-size'] = Math.min((w / 10).toFixed(1), 540 / 10) + 'px';
        }
    }

    }
</script>

roters.js代码

// 路由配置
const HomePage = resolve => require(['./pages/index.vue'], resolve);
export default [
    {
        name: 'index',
        path: '/index',
        components: HomePage
    }
]

我的文件夹结构

关于router.js

// 我尝试过这么写但是还是渲染空白
import HomePage from './pages/index.vue';
export default [
    {
        name: 'index',
        path: '/index',
        components: HomePage
    }
]

希望帮忙看下为什么会渲染空白。

下面这个图是我渲染之后的本地dom结构

下面是我这个项目的git仓库地址

https://github.com/wustzhaohui/blog.git

Answer 1

app.vue 的 <div></div> 上没写 id="app" 即 <div id="app"></div>，不晓得是不是 document.createElement('div') 那里不好使~

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

Answer 2

最后我自己找到了问题所在

在index.js中new Router的时候应该这么写

const router = new Router({
    routes: routers    
});

我也不是很明白为什么官方文档说这么写可以但是我这么写就是不行。