无法从 Vue 路由器传递组件中的道具

Question

嗨，我正在尝试从我的 vue 路由器传递道具，但它没有打印任何东西，当登录时它返回未定义，但是当我尝试 console.log(this.$route.params.id); 当我尝试 this.id returns undefined 或者更确切地说在我的用户模板中它没有输出任何东西，相同的代码在我正在观看的在线教程中工作，请帮助我，最近的版本中是否发生了任何修改

let User = {
  props: ['id'],
  template: `
            <div>Hello # {{id}}</div>
        `,
  mounted() {
    console.log(this.$route.params); // this is returning the value
    console.log(this.id); // this is giving undefined
  }
}

let App = {
  template: `
            <div class="wrapper">
                <router-view></router-view>    
            </div>
        `
}

let router = new VueRouter({
  routes: [{
    path: '/user/:id',
    component: User,
    props: true
  }, ],
})

let app = new Vue({
  el: '#app',
  router: router,
  components: {
    'app': App
  }
})

router.push('/user/1')

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

<div id="app">
  <app></app>
</div>

Answer 1

您使用的是非常旧版本的 Vue Router。只需切换到当前版本 - 3.5.2 - 你的代码就会按预期工作....

let User = {
  props: ['id'],
  template: `
            <div>Hello # {{id}}</div>
        `,
  mounted() {
    console.log(this.$route.params); // this is returning the value
    console.log(this.id); // this is giving undefined
  }
}

let App = {
  template: `
            <div class="wrapper">
                <router-view></router-view>    
            </div>
        `
}

let router = new VueRouter({
  routes: [{
    path: '/user/:id',
    component: User,
    props: true
  }, ],
})

let app = new Vue({
  el: '#app',
  router: router,
  components: {
    'app': App
  }
})

router.push('/user/1')

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>

<div id="app">
  <app></app>
</div>

无法从 Vue 路由器传递组件中的道具

Cannot pass props in component from Vue router

javascript

vue.js

vue-router

vuejs2