Vue.js - Vue-router and subroutes issue

Question

I'm trying to get Vue.js with the vue-router working. In my example I'd like to add a subroute/nested route to a view/template, but I get an "invalid expresion" error.

Here is the jsFiddle example: 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')

The nested link inside the Bar component is the one not working.

Any ideas?

Please post the concrete error please, including the message and line of code. — Thomas R.
– Thomas R., Commented Sep 25, 2015 at 9:52
I've got it solved by myself. :) I had to rewrite v-link="{ path: "/profile"}" to v-link="{ path: \'profile\' }" to get it working. — Dieter Frei
– Dieter Frei, Commented Sep 26, 2015 at 10:07
Inside an html attribute that uses quotes ", it's not really necessary to escape the single quotes inside. Just like in v-if="prop == 'value'" inside a tag. — Jaap
– Jaap, Commented Jan 11, 2016 at 21:47

Jimmy Obonyo Abor · Accepted Answer · 2016-07-11 19:41:16Z

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/

Collectives™ on Stack Overflow

Vue.js - Vue-router and subroutes issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related