点击内容列表页面的下一页可以显示一组不同的内容列表项目，刷新一下页面，又会恢复到最开始时的样子。我们可以在点击上一页或者下一页的时候，在页面地址里添加一个 page 查询符，它的值就是当前的页码，刷新页面的时候可以让页面组件读取这个查询符的值，然后显示对应的内容列表项目。

打开内容列表页面组件，在组件脚本里先用 useRouter 获取到路由器，声明一个 router，用一下 useRouter() 。 然后再得到当前页面地址里的 page 这个查询符的值，解构一下 useRoute 返回的结果，执行它得到的就是路由相关的东西，先把 query 解构出来，再把它里面的 page 解构出来，重命名为 pageNumber

下面声明这个 page 的时候，给这个 ref 提供的初始值可以判断一下 pageNumber ，如果 pageNumber 有值，就用一下 parseInt 把这个 pageNumber 转换成十进制的数字。不然就提供数字 1 作为这个 ref 的初始值。

然后再定义一个修改页面地址查询符的方法，名字叫 updateQuery，一个箭头函数，函数里面用一下 router.push ，提供一个对象，设置一下 query，它是一个对象，里面添加一个 page，值是 page.value。

在 backward 里面执行一下 updateQuery() ，在这个 forward 里面，也执行一下 updateQuery。

再去处理一下页面的标题，在组件模板里先用一组 Head，里面包装的是 Title，它里面的东西就是标题内容，判断一下组件里的 page 这个数据的值是否大于 1 ，如果是，把页面标题设置成 内容列表 / 后面加上第几页，页码可以使用 page 这个数据的值。如果 page 的值不大于1 ，就把页面标题设置成 内容列表。

在浏览器测试一下，点击下一页或者上一页，你会发现，页面地址里现在会出现 page 查询符，它的值就是当前的页码，刷新一下页面，页面仍然会显示对应的内容列表项目。

bug

现在这个翻页功能有个 bug，先点击下一页，然后再点一下 内容 这个导航项目，你会发现显示的内容项目并没有发生变化。

回到组件，在请求内容列表接口的时候，把 refresh 解构出来，然后在下面可以先执行一下这个 refresh()。

下面在组件里可以再监听一下路由的变化，用一下 watch ，监视的数据是路由，可以用一下 useRoute() ，提供一个函数，把路由里的 query 解构出来。

然后判断一下 query 里的 page，如果它的值是 undefined ，我们就把 page这个数据的值设置成 1 ，这样做会导致重新加载请求第一页的内容列表项目。

在浏览器上测试一下，点击下一页，然后再点击内容这个导航菜单项目，页面上又会显示第一页的内容列表项目。