如何匹配VUE路由器路线及组件功能

Question

使用vue-router包中使用它，它很容易match dynamic segments：

router.map({ 
    '/user/:username': { 
    component: { 
     template: '<p>username is {{$route.params.username}}</p>' 
    } 
    } 
}) 

但是，我无法弄清楚如何使用值组件方法，例如

router.map({ 
    '/user/:username': { 
    component: { 
     ready: function() { 
     // How to access the param here? 
     alert($route.params.username); 
     } 
    } 
    } 
}) 

如何访问组件方法中匹配的段？

Answer 1

几乎是你贴什么

// inside your component 
this.$route.params.username 

的关键是，在模板中，你不需要指this范围，但在方法，你必须使用它

Answer 2

的$route对象被注入到每个路由器配对的参与者中，根据你的情况你可以使用params方法来获得传递的键/值。

router.map({ 
    '/user/:username': { 
    component: { 
     ready: function() { 
     // How to access the param 
     // use the scope 'this' 
     alert(this.$route.params.username); 
     } 
    } 
    } 
}) 

更多信息请查看http://router.vuejs.org/en/api/route-object.html