Question

我尝试在条目组件中访问我的参数：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']
})

这些都可以在文档中找到： Passing Props to Route Components

Answer 2

你应该简单地使用它：

$route.params.id

了解详情：https://router.vuejs.org/guide/essentials/dynamic-matching.html

Answer 3

您可以在组件中使用

this.$route.params.id

Answer 4

使用html <div>{{$route.params.id}}</div>

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

Answer 5

<template>
    <div>
      <p>{{id}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id:this.$route.params.id
            }
        },
    }
</script>

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

5 个答案: