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对象被注入到每个路由器maped的支持者中，根据您的情况，您将使用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

如何匹配vue-router路由并在组件函数中使用它

2 个答案: