浏览器 \|如何访问我的组件中的路由器参数

Question

我试图在我的 Entry 组件中访问我的参数 :id 。我用道具试了一下，但没用。任何想法？找不到任何东西。

 export default new Router({
    routes: [{
        path: '/entry/:id',
        name: 'Entry',
        component: Entry
    }]
})

谢谢

原文由 bonblow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然 soju 的回答是正确的，但我倾向于使用文档中称为“使用 props 解耦路由器”的方法。

这可以通过将 props: true 选项添加到您的路由并在您的组件中定义一个属性来实现。

所以在你的路线中你会有：

 export default new Router({
     routes: [{
          path: '/entry/:id',
          name: 'Entry',
          component: Entry,
          props: true
     }]
})

然后在你的组件中添加一个道具：

 Vue.component('Entry', {
       template: '<div>ID: {{ id}}</div>',
       props:['id']
})

这些都可以在文档中找到：将 道具传递给路由组件

原文由 Russell Shingleton 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您应该简单地使用 $route.params.id 或 this.$route.params.id 。

阅读更多： https ://router.vuejs.org/guide/essentials/dynamic-matching.html

您应该考虑使用道具： https ://router.vuejs.org/en/essentials/passing-props.html

原文由 soju 发布，翻译遵循 CC BY-SA 4.0 许可协议