无法让vue-router工作

时间:2017-09-16 22:34:11

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

使用单页进行此操作。当我介绍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>'
    });
});

2 个答案:

答案 0 :(得分:0)

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

Duration<CalendarUnit> d1 = Duration.parseCalendarPeriod("P8W");
System.out.println(d1); // P8W
System.out.println(d1.getPartialAmount(CalendarUnit.WEEKS)); // 8
System.out.println(Duration.Formatter.ofPattern(CalendarUnit.class, "W' weeks'").format(d1)); // 8 weeks
System.out.println(PrettyTime.of(Locale.GERMAN).print(d1)); // 8 Wochen
LocalDate ld = LocalDate.of(2017, 9, 17);
System.out.println(PlainDate.from(ld).plus(d1)); // 2017-11-12
System.out.println(PlainDate.of(2017, 9, 17).plus(d1)); // 2017-11-12

Duration<IsoUnit> d2 = Duration.parsePeriod("P2DT5H10M");
LocalDateTime ldt = LocalDateTime.of(2017, 9, 17, 19, 15);
System.out.println(PlainTimestamp.from(ldt).plus(d2)); // 2017-09-20T00:25
System.out.println(PlainTimestamp.of(2017, 9, 17, 19, 15).plus(d2)); // 2017-09-20T00:25
System.out.println(PrettyTime.of(Locale.GERMAN).print(d2)); // 2 Tage, 5 Stunden und 10 Minuten

Duration<IsoUnit> d3 = Duration.parsePeriod("P0001-01-02T05:10:04");
System.out.println(d3); // P1Y1M2DT5H10M4S
LocalDateTime ldt = LocalDateTime.of(2017, 9, 17, 19, 15);
System.out.println(PlainTimestamp.from(ldt).plus(d3)); // 2018-10-20T00:25:04

答案 1 :(得分:0)

您尚未定义根路由,例如/。因此,您不会在/看到任何组件呈现。你能导航到/aaa并看到一些东西吗?此外,不应将这些路径组件传递给Vue.component