vue-router的router-view不能渲染

Question

Answer 1

new 的时候，好像是 routes，而不是 routers?

然后把 base: __dirname 也加上看看？

Answer 2

试一下在App.vue中的mounted钩子中加载默认route
[rootVue].$router.push('/foo');
[rootVue]必须替换成指向你的Vue实例

Answer 3

今天开始上vue班车，尝试搭建框架的时候，我也遇到了router-view和router-link不能渲染的问题。

接着我看了vue官方的demo，修改了几处，就可以正常渲染了。

测试版本：

"vue": "^2.2.6",
"vue-router": "^2.4.0"

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';

const router = new VueRouter({
    mode: 'history',
    base: __dirname, //这个很重要
    routes
})

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

App.vue

<template>
    <div>
        <ul>
            <li><router-link to="/">home</router-link></li>
            <li><router-link to="/foo">foo</router-link></li>
        </ul>
        <router-view class="view"></router-view>
    </div>
</template>

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

routes.js

import Home from './components/home/Home.vue';
import Foo from './components/foo/Foo.vue';

export default [
    {
        path: '/',
        component: Home
    },
    {
        path: '/foo',
        component: Foo
    }
]