方法 2 自定义 @nuxtjs/router 模块与推送代替默认路由器，我尝试使用自定义@nuxtjs/moduleInstead of the default router, I tried using the custom @nuxtjs/module在这种方法中选择链接的速度要快得多，而且 URL 也会发生变化Links are selected much much faster in this approach and the URL is also changing但是，如果我单击项目 4877，它会重新加载页面并且滚动条返回到页面顶部?However if I click on item 4877, it reloads the page and the scrollbar goes back to the top of the page?如何将滚动条保持在任何位置或防止重新加载页面?How do I keep the scrollbar wherever it is or PREVENT reloading the page?这是使用自定义路由器的 CodeSandbox 的方法 2简单问题在 SSR 模式下，如何在不重新加载页面的情况下选择列表中的项目时更改 URL?哪种方法更好?推荐答案无需重新加载页面或刷新 dom，history.pushState 即可完成这项工作.在你的组件或其他地方添加这个方法来做到这一点:Without reloading the page or refreshing the dom, history.pushState can do the job.Add this method in your component or elsewhere to do that:addHashToLocation(params) { history.pushState( {}, null, this.$route.path + '#' + encodeURIComponent(params) )}因此，在组件中的任何位置，调用 addHashToLocation('/my/new/path') 以在 window.history 堆栈中使用查询参数推送当前位置.So anywhere in your component, call addHashToLocation('/my/new/path') to push the current location with query params in the window.history stack.要将查询参数添加到当前位置而不推送新的历史记录条目，请改用 history.replaceState.To add query params to current location without pushing a new history entry, use history.replaceState instead.应该适用于 Vue 2.6.10 和 Nuxt 2.8.1. Should work with Vue 2.6.10 and Nuxt 2.8.1. 小心这种方法！Vue Router 不知道 url 发生了变化，所以在 pushState 之后不反映 url.Be careful with this method! Vue Router don't know that url has changed, so it doesn't reflect url after pushState.由于 Vue Router 不反映更改，因此无法获取 url 的参数.所以我们必须处理不同的逻辑来在路由之间传递数据.这可以通过专用的 Vuex 存储来完成，或者简单地使用 Nuxt 全局总线事件.As Vue Router doesn't reflect change, it's not possible to get params of url. So we have to handle a different logic to pass data between routes. This can be done with dedicated Vuex store, or simply with the Nuxt global bus events.// main componentcreated() { // event fire when pushState this.$nuxt.$on('pushState', params => { // do your logic with params })},beforeDestroy() { this.$nuxt.$off('pushState')},...// Where there are history.pushStatethis.$nuxt.$emit('pushState', params) 这篇关于如何在不重新加载整个页面的情况下在 Nuxt SSR 模式下更改页面的 URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
