Question

我正在尝试使用vue-router工作的Vue.js。在我的示例中，我想将一个子路由/嵌套路由添加到视图/模板中，但是我收到“无效的表达式”错误。

以下是jsFiddle示例：http://jsfiddle.net/diemah77/18t6xkku/11/

app.html：

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <a v-link="{ path: '/foo' }">Go to /foo</a>
    <a v-link="{ path: '/bar' }">Go to /bar</a>
  </p>
  <router-view></router-view>
</div>

app.js：

var Foo = Vue.extend({
  template:
    '<div class="foo">' +
      '<h2>This is Foo!</h2>' +
      '<router-view></router-view>' + // <- nested outlet
    '</div>'
})

var Bar = Vue.extend({
    template: 
        '<p>This is bar!</p>' +
        '<ul>' +
            '<li><a v-link="{ path: "/profile"}"</a></li>' +
        '<ul>' +
        '<router-view></router-view>'
})

var Profile = Vue.extend({
    template: '<p>This is profile!</p>'
})

// configure router
var router = new VueRouter()

router.map({
    '/foo': {
        component: Foo,
    },

    '/bar': {
        component: Bar,

        subRoutes: {
            '/profile': {
                component: Profile   
            }
        }
    }
})

// start app
var App = Vue.extend({})
router.start(App, '#app')

Bar组件内的嵌套链接是不起作用的链接。

有什么想法吗？

Answer 1

You need to delay the transition with router.beforeEach until v-if inserts content:

var App = Vue.extend({
    data: function() {
        return {
            theThingIsReady: false,
//            theThingIsReady: true,
        };
    },

    attached: function() {
        setTimeout(function() {
            this.theThingIsReady = true;
        }.bind(this), 1000);
    },
})

var router = new VueRouter()

router.map({
    '/a': {
        component: {
            template: '<p>A template</p>',
            route: {
                data:          function(t) {console.log('a data'); t.next(); },
                activate:      function(t) {console.log('a activate'); t.next(); },
                deactivate:    function(t) {console.log('a deactivate'); t.next(); },
                canActivate:   function(t) {console.log('a canActivate'); t.next(); },
                canDeactivate: function(t) {console.log('a canDeactivate'); t.next(); },
                canReuse:      function(t) {console.log('a canReuse'); t.next(); },
            }
        },
    },
    '/b': {
        component: {
            template: '<p>B template</p>',
            route: {
                data:          function(t) {console.log('b data'); t.next(); },
                activate:      function(t) {console.log('b activate'); t.next(); },
                deactivate:    function(t) {console.log('b deactivate'); t.next(); },
                canActivate:   function(t) {console.log('b canActivate'); t.next(); },
                canDeactivate: function(t) {console.log('b canDeactivate'); t.next(); },
                canReuse:      function(t) {console.log('b canReuse'); t.next(); },
            }
        },
    },
})

// Delay initial route until the thing is ready
router.beforeEach(function(transition) {
    if(!router.app.theThingIsReady) {
        var unwatch = router.app.$watch('theThingIsReady', function(isReady) {
            if(isReady) {
                unwatch();
                transition.next();
            }
        });
    } else {
        transition.next();
    }
});

router.start(App, '#app')
router.go('/a');

http://jsfiddle.net/hakikahost/4tnfcnb2/

Vue.js - Vue-router和subroutes问题

1 个答案: