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

我想要vue.js与vue路由器工作。在我的示例中，我想向视图/模板添加子路由/嵌套路由，但出现“无效表达式”错误。Vue.js - Vue路由器和子路由问题

这里是的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')

的栏组件内部的嵌套链接是一个不工作。

任何想法？

来源

2015-09-25 Dieter Frei

请张贴的具体错误，请，包括消息和代码行。 –

我自己解决了它。 :)我不得不重写v-link =“{path：”/ profile“}”到v-link =“{path：\'profile \'}”来让它工作。 –

在使用引号'''的html属性内部，并不需要转义单引号，就像在标签内的'v-if =“prop =='value'”'一样。 – Jaap

您需要延迟与router.beforeEach过渡到V-如果插入内容：

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/

来源

2016-07-11 19:41:16

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

回答

相关问题