之前我们创建过一个内容编辑页面，页面对应的路由是 /posts/[id]/edit 。先打开内容列表页面，在内容项目里面添加一个打开内容编辑页面用的小图标。

在内容作者名字的下面，添加一组 div，里面再包装一组 div，在它里面用一下 NuxtLink 创建一个路由链接，绑定一下链接地址，一个字符模板，先是 /posts/ 后面是 ${post.id} 然后是 /edit。链接里包装的是一个图像元素，设置一下图像文件位置，/assets/icons/edit.svg，再把 alt 属性的值设置成编辑。

现在内容列表页面上的内容项目里面都会有一个编辑小图标，点击这个小图标，可以打开这个内容对应的编辑页面。

edit.vue

回到项目，复制一下创建内容用的这个页面组件里的东西，然后打开 pages/posts/[id]/edit.vue，这是编辑内容用的页面，把复制的东西粘贴到这个组件里。

然后先修改一下组件模板，把这个按钮文字换成更新，点击事件的处理方法设置成 editPost。再改一下组件脚本，页面标题改成编辑内容。

在这个页面需要获取要编辑的内容，所以需要用到内容的 id。用一下 useRoute，解构一下路由，需要的是 params 也就是地址参数，再把它里面的 id 解构出来。

成功修改了内容以后可以打开内容列表页面，声明一个 router ，用一下 useRouter。

下面可以请求得到要编辑的内容，把 data 解构出来，重新给它起个名字叫 post，等于 await，用一下 useApiFetch，接口地址是 posts/${id} ， 这里提示使用 useApiFetch 的时候少提供了一个参数，打开 use-api-fetch，我们可以把这个 options 参数设置成可选的，在后面加上一个 ? 号。

回到 edit 组件。然后判断一下 post.value ，如果有值，就设置一下 title.value ，让它等于 post.value.title，下在再设置一下 content.value，让它等于 post.value.content。这里又提示了一个类型问题，我们可以在使用 useApiFetch 的时候设置一下它返回的数据的类型，把它设置成 Post，在脚本顶部可以作为类型导入这个 Post。

如果你希望刷新内容编辑页面以后也可以正常设置 title 还有 content 的值。可以用一下 watch ，监视一下 post，再提供一个函数参数 ，添加一个 current 参数，它的值就是 post 当前的值。在函数里设置一下 title 的值，让它等于 current.title，再设置一下 content 这个数据的值，让它等于 current.content。

下面再把这个 createPost 改成 editPost，表示编辑内容，请求的接口地址是 posts/${id}，这个 id 的值就是从路由地址参数里得到的。请求用的方法改成 PATCH。

内容修改成功以后，可以打开内容列表页面，用一下 router.push，地址是 /posts。

测试

现在这个内容编辑页面的表单元素上会显示要编辑的这个内容的标题还有正文。刷新一下这个页面，同样在表单元素上可以正常显示要编辑的内容。

修改一下内容，然后点击更新。 成功以后会打开内容列表页面，刷新一下这个内容列表页面，这里会显示修改之后的这个内容项目。