vue.js - 如何在 Nuxt SSR 模式下更改页面的 URL 而无需重新加载整个页面？

Question

我正在尝试构建一个主详细信息 View ，其中列表和详细信息在桌面上并排显示，但在移动设备上的不同页面上显示，如下图所示

我可能在列表中有 500 到 10000 个项目要显示

我用 10000 个项目模拟了这两种方法，随意更改 server/app.js 文件中的数字

当我单击列表中的某个项目时，我希望 URL 发生更改，以便单击后退按钮转到上一个按钮。

页面不应为此重新加载，它应该处于 SSR 模式

我尝试了什么？

方法 1 动态路由

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

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

Here is Approach 1 on CodeSandbox

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

我尝试使用自定义 @nuxtjs/module

而不是默认路由器

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

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

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

Here is Approach 2 on CodeSandbox with Custom Router

简单的问题

当我在列表中选择一个项目而不重新加载页面时，我在 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反而。

Should work with Vue 2.6.10 and Nuxt 2.8.1.  

Be careful with this method!
Vue Router don't know that url has changed, so it doesn't reflect url after pushState.

由于 Vue Router 不反射(reflect)更改，因此无法获取 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)