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

Question

使用该vue-router包，很容易匹配动态段：

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