无法让 vue-router 工作答案

【问题标题】：Cannot get vue-router to work无法让 vue-router 工作
【发布时间】：2018-02-25 19:04:21
【问题描述】：

使用单个页面即可完成此操作。当我介绍vue-router 时，什么都不会呈现。

在main.js 中，如果我返回app.js 并带有示例文本和少量编辑；它渲染得很好，没有任何问题。似乎这与我如何实例化vue-router 有关。此外，我的环境中没有控制台错误。

main.js

define(function(require) {
    'use strict';
    var Vue = require('vue');
    var VueRouter = require('vue-router');
    var App = require('app');

    var Foo = { template: '<div>oijsdfoijsdoifjdsf</div>' }
    var Bar = { template: '<div>bar</div>' }

    Vue.use(VueRouter);

    var routes = [
      { path: '/aaa', component: Foo },
      { path: '/bbb', component: Bar }
    ]

    var router = new VueRouter({
      routes: routes 
    });

    return new Vue({
        el: '#vue',
        router: router,
        render: function(h) {
            h(App);
        }
    });
});

app.js

define(function(require) {
    'use strict';

    var Vue = require('vue');

    return new Vue({
        template: '<div id="vue"><router-view></router-view></div>'
    });
});

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

根据我的经验，您可以将路由器配置更改为：

const router = new VueRouter({
    base: __dirname, // or '/'
    routes: routes
})

【讨论】：

【解决方案2】：

您尚未定义根路由，例如/。所以你不会在/ 看到任何组件渲染。你能导航到/aaa 看看吗？另外，这些路由组件不应该传递给Vue.component吗？

【讨论】：