页面不显示router链接，console显示h=>h(App)这里Uncaught SyntaxError

Question

小白尝试一步步构建vue项目，求高手指教：

main.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import routerConfig from './router';
Vue.use(VueRouter);
var router = new VueRouter(routerConfig)
new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

app.vue:

<template>
    <div>
        <router-link to="/index">Home</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>

router.js:

import index from './views/index.vue'
export default {
    mode: 'history',
    routes: [
        {
            path: '/index',
            component: index
        }
    ]
}

index.vue

<template>
    <div>
        这是{{page页面}}
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                page: 'index'
            }
        }
    }
</script>

问下这里的为啥 HOME没有显示出来？

这里console提示：
render：h=>h(App)
这一行：Uncaught SyntaxError: Unexpected identifier

查资料看了一下 应该是箭头函数不识别

换了最新的chrome版本，可以显示了

并且按照教程加了babel的依赖(省略部分后的)：

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",

加了.babelrc

{
    "presets": ["es2015"],
    "comments": false
}

但是还是会在build的时候报错

跪求啊....

Answer 1

换种写法试试

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

改为

new Vue({
    router: router,
    render: h => h(App)
}).$mount('#app');

Answer 2

这里面的{{page页面}}改成{{page}}页面