コンポーネントの小道具が未定義なのはなぜですか（vue router）

私はVueが初めてで、Vueルーターを適用する方法を学ぼうとしています。問題なく動作するように通常のルーティングを取得しました。動的ルーティングを使用しようとすると、すべてが正常に機能し続けました。しかし、動的ルートに小道具を渡そうとしたとき、コードが壊れます。

公式Webサイトで推奨されているバージョンのVueおよびVueルーターのこれらのcdnバージョンを使用しています。 -https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js -https://unpkg.com/vue-router@2.0.0/dist/vue-router.js

HTML

<div id="app">
  <h1>{{ message }}</h1>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/user/John">Name</router-link>
  </nav>
  <!-- route outlet -->
  <!-- component matched by route will render here -->
  <router-view></router-view>
</div>

JS

// Route components
  const Home = { template: '<div>Home</div>' };
  const About = { template: '<div>About</div>' };
  const User = { props: ['name'], template: `
    <div>
      <div>User {{ name }}</div>
      <button @click="checkName">Check</button>
    </div>`,
    methods: {
      checkName: function() {
        console.log('Params name: ' + this.$route.params.name);
        console.log('Props name: ' + this.name);
      }
    }
  };
  // Routes for router
  const routes = [
    { path: '/', component: Home },
    { path: '/home', redirect: Home },
    { path: '/about', component: About },
    { path: '/user/:name', component: User, props: true }
  ];
  const router = new VueRouter({
    routes: routes
  });
  const app = new Vue({
    el: '#app',
    data: {
      message: 'VueJS Router'
    },
    router: router
  });

「名前」ページに移動すると、静的テキストは正常にレンダリングされますが、動的テキストのロードに失敗します。 propsおよび$route.paramsからの名前の値をユーザーに記録するボタンを追加しました。クリックすると、propsのnameの値は未定義ですが、paramsのnameの値は正しいことがわかります。どうしてこれなの？