之前我们在 Vue 应用里定义的都是静态的路由，也就是你规定了路由的固定的地址，访问这个具体地址的时候，可以显示某个组件。路由也可以是动态的，就是我们可以定义具有某种特定模式的路由地址，在路由地址里可以添加一些参数，这些参数的值可以在对应的组件里得到。比如你可能需要一个展示内容的页面，根据用户访问的地址，显示不同的内容。

下面我们一块儿试一下定义一个动态路由。先在应用里创建一个组件，放在 src/post/show 目录的下面，名字叫 post-show.vue ，在组件里用一组 template，里面用一组 div，包装一行文字，比如 PostShow。

然后打开 post.routes.ts， 先在文件顶部导入需要的组件，导入的是 PostShow 这个组件，来自当前目录 show 下面的 post-show.vue。

在routes 里面添加一个对象，定义一条路由，先用 path 设置一下路由的地址，把它设置成 /posts/:postId ，这就是一个动态路由，也就是一个带参数的路由，这里的 :postId 就是地址里的一个参数。用户如果访问 /posts/1 ，这个地址里的 :postId 参数的值就是 1，访问的是 /posts/2 ，地址参数里的 :postId 的值就是 2 。

下面再用 name 给这个路由起个名字，postShow，再添加一个 component 属性，对应的组件设置成 PostShow 。

先回到浏览器测试一下，可以手工在地址栏里输入一个地址 /posts/1 ，你会发现，显示的就是 PostShow 这个组件，再试一下，访问 /posts/3 ，仍然会显示 PostShow 这个组件。

在这个组件里我们可以利用地址参数的值去做一些事情，比如根据这个值找出对应的内容数据，再把内容展示出来。打开 post-show.vue 这个组件，在组件的模板里可以先用一下 postId 这个地址参数的值，地址参数可以在 $route.params 这个属性里找到，这里要用的是 postId 这个参数，这个参数的名字是我们在定义路由的时候自己设置的，也就是这个 /posts/:postId 里面的 :postId。

在组件的脚本里你也可以得到这个参数值，添加一组 script ，默认导出一个对象，添加一个 created 生命周期方法，在方法里可以在控制台上输出 postId 这个地址参数的值。 this.$route. params.postId。

回到浏览器再试一下，现在访问的是 /posts/3，在 PostShow 组件里绑定输出的 postId 这个参数的值就是 3。修改一下访问的地址，/posts/6，在组件这里显示的 postId 参数的值就是 6 。

在控制台上，也会输出当前访问的地址里的 postId 这个参数的值。