Javascript 如何通过道具提取路线参数

我正在学习VueJs，并试图了解如何通过

道具
提取
路线
参数

我在看下面的文档，其中似乎有三个选项可以完成这项工作，但到目前为止我还不能很好地理解-
https://github.com/vuejs/vue-router/tree/dev/examples/route-props

我尝试将
props:true
添加到我的
router
对象数组（下面发布的routes.js文件）中，但也没有成功

由于这是一个
vue cli
研究项目，我将发布单独的相关代码块，以尝试正确地说明这一点

Main-App.vue如下：

 <template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Routing</h1>
                <hr>
                <app-header></app-header>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from './components/Header.vue'
    export default {
        components: {
            appHeader: Header
        }
    }
</script>

<style>
</style>

<template>
    <ul class="nav nav-pills">
        <router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
        <router-link to="/user/10" tag="li" active-class="active"><a>User 1</a></router-link>
        <router-link to="/user/5" tag="li" active-class="active"><a>User 2</a></router-link>

    </ul>
</template>

<template>
    <div>
        <h1>The User Page</h1>
        <hr>
        <br>
        <p>Route ID: {{id}}</p>
        <button class="btn btn-primary" @click="goHome">Go to Home</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                id: this.$route.params.id
            }
        },
        watch: {
          '$route'(to, from) {
              this.id = to.params.id;
          }
        },
        methods: {
            goHome(){
                this.$router.push('/')
            }
        }

    }

</script>

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from "./routes";

Vue.use(VueRouter)

export const router = new VueRouter({
  routes,
  mode: 'history'
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

import User from './components/user/User.vue'
import Home from './components/Home.vue'

export const routes = [
    {path: '', component: Home},
    {path: '/user/:id', component: User}
]

routes.js（位于SRC文件夹）：

 <template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Routing</h1>
                <hr>
                <app-header></app-header>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from './components/Header.vue'
    export default {
        components: {
            appHeader: Header
        }
    }
</script>

<style>
</style>

<template>
    <ul class="nav nav-pills">
        <router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
        <router-link to="/user/10" tag="li" active-class="active"><a>User 1</a></router-link>
        <router-link to="/user/5" tag="li" active-class="active"><a>User 2</a></router-link>

    </ul>
</template>

<template>
    <div>
        <h1>The User Page</h1>
        <hr>
        <br>
        <p>Route ID: {{id}}</p>
        <button class="btn btn-primary" @click="goHome">Go to Home</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                id: this.$route.params.id
            }
        },
        watch: {
          '$route'(to, from) {
              this.id = to.params.id;
          }
        },
        methods: {
            goHome(){
                this.$router.push('/')
            }
        }

    }

</script>

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from "./routes";

Vue.use(VueRouter)

export const router = new VueRouter({
  routes,
  mode: 'history'
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

import User from './components/user/User.vue'
import Home from './components/Home.vue'

export const routes = [
    {path: '', component: Home},
    {path: '/user/:id', component: User}
]

我是否也需要在
User.vue
组件上设置
Props
，以使其正常工作并退出使用
watch

换言之，我希望看到我的用户路线在
route ID:{{ID}
上被监听，从这个硬编码的
10
到
5
，使用这个我无法理解的新方法，在这篇文章的顶部提到

在这种特殊情况下，有人能给我介绍一下这个问题吗

提前感谢大家。
根据上的文档，您可以使用路由器配置上的
道具
选项将其解耦

从“./components/User/User.vue”导入用户
从“./components/Home.vue”导入主页
导出常量路由=[
{路径：''，组件：Home}，
{path:'/user/:id'，component:user，props:true}
]


用户页面



路由ID:{{ID}

回家
导出默认值{
道具：['id']，
方法：{
goHome（）{
这是。$router.push（“/”）
}
}
}
太棒了！所以实际上需要设置props@
User.vue
file！它很管用，而且很整洁。谢谢亲爱的Yom