如何在Nuxt SSR模式下更改页面的URL而不重新加载整个页面？

• 我正在尝试构建一个主详细信息视图，其中列表和详细信息在桌面上并排显示，但在移动设备上的不同页面上显示，如下图所示
• 我的列表中可能有 500 到 10000 个项目要显示
• 我用 10000 个项目模拟了这两种方法，请随意更改 server/app.js 文件中的数字

• 当我单击列表中的某个项目时，我希望更改 URL，以便单击后退按钮转到上一个按钮。
• 页面不应为此重新加载，并且应处于 SSR 模式

我尝试了什么？

方法 1 动态路由

• 在pages文件夹内，我放置了一个articles文件夹和_id.vue文件，并添加了一个nuxt-link

• 此设置非常非常慢，需要 20 秒才能更改摘要

• 这是 CodeSandbox 上的方法 1

方法 2 带推送的自定义 @nuxtjs/router 模块

• 我尝试使用自定义 @nuxtjs/module 而不是默认路由器

• 通过这种方法，链接的选择速度要快得多，而且 URL 也会发生变化

• 但是，如果我单击项目 4877，它会重新加载页面并且滚动条会返回到页面顶部？

• 如何使滚动条保持在任何位置或防止重新加载页面？

• 这是使用自定义路由器的 CodeSandbox 上的方法 2

简单的问题

• 在 SSR 模式下如何在选择列表中的项目时更改 URL，而不重新加载页面？
• 哪种方法更好？

无需重新加载页面或者刷新dom，history.pushState可以完成这项工作。
在您的组件或其他地方添加此方法来执行此操作：

addHashToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path + '#' + encodeURIComponent(params)
  )
}

所以在你的组件的任何地方，调用addHashToLocation('/my/new/path')使用查询参数将当前位置推送到 window.history 堆栈中。

将查询参数添加到当前位置没有推动新的历史进入、使用history.replaceState反而。

应该与 Vue 2.6.10 和 Nuxt 2.8.1 一起使用。

使用这个方法要小心！
Vue Router不知道url已经改变，所以在pushState之后它不会反映url。

由于 Vue Router 不反映更改，因此无法获取 url 的参数。因此，我们必须处理不同的逻辑来在路由之间传递数据。这可以通过专用的 Vuex 存储来完成，或者简单地通过 Nuxt 全局总线事件来完成。

// main component
created() {
  // event fire when pushState
  this.$nuxt.$on('pushState', params => {
    // do your logic with params
  })
},
beforeDestroy() {
  this.$nuxt.$off('pushState')
},
...

// Where there are history.pushState
this.$nuxt.$emit('pushState', params)