- 在点击内容列表页面的“下一页”时会显示新内容，并且通过在页面地址添加查询字符串（配置查询符及其值为当前页码）来保持页面状态。
- 页面刷新时，页面组件会读取这个查询字符串值来显示相应的内容。
- 使用vue-router里的
useRoute可以获取路由器实例并处理路由变化。 - 使用
useRoute获取页面地址中的配置值，将其重命名为number。 - 如果
number有值，则将其解析为十进制数字，否则设置为默认值1。 - 定义一个
updateQuery函数来修改页面地址的查询字符串。 - 通过
router.push设置查询参数，使其反映在地址栏和页面标题中。 - 页面标题会根据查询参数的值显示相应的页码信息。
- 发现一个翻页功能的bug：当点击“下一页”后再点击内容，所显示的内容并未变化。
- 解决方法是在组件里面使用
watch来监听路由变化，并在检测到未定义的查询值时重载到第一页的内容。 - 点击“下一页”然后点击内容导航菜单，页面会正确显示第一页的内容项。