如何匹配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