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

Question

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

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

我尝试了什么？

方法 1 动态路由

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

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

• 这是 CodeSandbox 上的方法 1

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

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

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

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

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

• 这是带有自定义路由器的 CodeSandbox 上的方法 2

简单的问题

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

Answer 1

无需重新加载页面或刷新 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)