VueJS | 如何访问我的Component中的Router Parameter

Question

我试图在我的Entry组件中访问我的参数:id.我用道具尝试了它,但它不起作用.任何的想法？找不到任何东西.

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

谢谢

Answer 1

虽然soju的答案是正确的,但我倾向于使用docs称为"使用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']
})

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

Answer 2

你应该简单地使用这个:

__PRE__

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

Answer 3

你可以在组件中使用

this.$route.params.id

Answer 4

在 html 中 <div>{{$route.params.id}}</div>

在脚本中 this.$route.params.id