有时候我们需要路由地址里带参数，这样在路由组件里可以根据这个参数的值，动态获取到特定的数据。比如展示内容详情的页面，需要在地址参数里包含内容 ID 这个参数，这样在组件里就可以根据这个参数的值，获取到指定的内容数据了。

在 Nuxt 应用里定义这种带参数的路由，创建的页面组件的名字里可以包含需要的参数，在 pages/posts 的下面，新建一个文件，文件的名字先用一组方括号，方括号里面的东西就是路由地址参数的名字，比如 id，扩展名是 .vue 。

在文件里添加一组 template ，一组 div，要显示的文字是 内容页面。

在浏览器测试一下，访问 /posts/1 ，显示的就是内容页面，也就是 pages/posts 下面的方括号 id 这个文件里定义的组件。修改一下地址，访问一下 /posts/3 ，同样会显示内容页面。

现在假设应用需要一个内容编辑页面，地址是 /posts/ 内容 id 然后是 /edit，可以这样，先把 posts/[id].vue 这个文件放到 [id] 这个目录的下面，然后把文件的名字改成 index.vue。

在这个 [id] 目录的下面再新建一个页面组件，名字是 edit.vue，文件里定义一个组件，设置一下组件的模板， template，一组 div ，要显示的文字是内容编辑。

在浏览器测试一下，访问一下 /posts/3/edit ，现在显示的就是内容编辑页面，因为这种地址模式匹配的就是 posts/[id] 目录下的 edit.vue 这个页面组件。

useRoute

在组件里通过 useRoute 这个 composable，可以得到当前路由相关的东西，比如路由的地址参数。

在这个 edit 组件里面，添加一组 script，上面加上 setup，在它里面可以使用 Nuxt 提供的 useRoute，解构一下它返回的结果，先把它里面的 params 解构出来，这个 params 里的东西就是路由地址参数，继续解构它，再它里面的 id 这个参数解构出来。

复制一下，然后在组件的模板里面绑定输出这个 id 参数的值。打开 posts/[id] 下面的 index，把复制的脚本粘贴到这里，在组件模板里也绑定输出 id 这个地址参数的值。

然后回到浏览器预览一下，现在访问 /posts/3/edit 这个地址的时候，内容编辑页面上会显示地址里的 id 这个参数的值，这个参数的值是在组件里使用 useRoute 获取到的。再试一下，访问 /posts/3 ，在内容页面上，也会显示 id 这个地址参数的值。