Vue.js - Vue 路由器和子路由问题答案

【问题标题】：Vue.js - Vue-router and subroutes issueVue.js - Vue 路由器和子路由问题
【发布时间】：2015-12-23 02:53:35
【问题描述】：

我正在尝试让 Vue.js 与 vue-router 一起工作。在我的示例中，我想向视图/模板添加子路由/嵌套路由，但出现“无效表达式”错误。

这里是 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 组件内的嵌套链接不起作用。

有什么想法吗？

【问题讨论】：

请发布具体错误，包括消息和代码行。
我自己解决了。 :) 我必须将 v-link="{ path: "/profile"}" 重写为 v-link="{ path: \'profile\' }" 才能使其正常工作。
在使用引号" 的html 属性中，实际上没有必要转义其中的单引号。就像标签内的v-if="prop == 'value'" 一样。

标签： vue.js

【解决方案1】：

您需要使用 router.beforeEach 延迟转换，直到 v-if 插入内容：

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/

【讨论】：