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

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 方法来获得 key/value 通过。

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 路由并在组件函数中使用它

How to match a vue-router route and use it in a component function

vue.js

vue-router