Как изменить URL-адрес страницы в режиме Nuxt SSR без перезагрузки всей страницы? - PullRequest
Новая
       93

Как изменить URL-адрес страницы в режиме Nuxt SSR без перезагрузки всей страницы?

0 голосов
/ 19 октября 2019
  • Я пытаюсь создать главный подробный вид, где список и детали отображаются рядом на рабочем столе, но на разных страницах на мобильном телефоне, как показано на рисунке ниже
  • У меня может быть от 500 до10000 элементов в списке для отображения
  • Я смоделировал оба подхода с помощью 10000 элементов, смело меняйте число в файле server / app.js

enter image description here

  • Когда я нажимаю на элемент в списке, я хочу, чтобы URL-адрес изменился, и я нажимаю кнопку "Назад", чтобы перейти к предыдущей кнопке.
  • Страница не должнаперезагрузите для этого, и он должен быть в режиме SSR

Что я пробовал?

Подход 1 Динамические маршруты

  • Внутри папки страниц я поместил папку статей и файл _id.vue и добавил nuxt-ссылку

  • Эта установка ОЧЕНЬ ОЧЕНЬ медленная, занимает 20секунд для изменения сводки

  • Вот подход 1 на CodeSandbox

Подход 2 Custom @ nuxtjs / модуль маршрутизатора с push

  • Вместо маршрутизатора по умолчанию я попытался использовать custom @ nuxtjs /модуль

  • При этом подходе ссылки выбираются намного быстрее, и URL также меняется

  • Однако, если я нажимаю на элемент 4877, он перезагружаетсястраница и полоса прокрутки возвращаются к началу страницы?

  • Как сохранить полосу прокрутки там, где она есть, или ПРЕДОТВРАТИТЬ перезагрузку страницы?

  • Вот подход 2 на CodeSandbox с пользовательским маршрутизатором

Простой вопрос

  • Что мне делать в режиме SSR для измененияURL, как я выбираю элемент в списке без перезагрузки страницы?
  • Какой подход лучше?

Ответы [ 2 ]

1 голос
/ 24 октября 2019

вы можете попробовать разбить страницу на 2 части: "/pages/arcticles.vue" и "/pages/arcticles/_id.vue". Этот подход похож на ваш первый, список не перезагрузить список. Со скоростью я не знаю что делать. Результирующий размер страницы составляет 15 МБ.

arcticles.vue 

<template>
  <div class="root">
    <div class="left">
      <ul>
        <li v-for="i in sortedArticles" :key="i.feedItemId">
          <nuxt-link :to="'/articles/' + i.feedItemId">
            Article {{ i.title }}
          </nuxt-link>
        </li>
      </ul>
    </div>
    <nuxt-child class="right"></nuxt-child>
  </div>
</template>

arcticles / _id.vue 

<template>
  <div>
    Article {{ $route.params.id }}
  </div>
</template>
1 голос
/ 21 октября 2019

Без перезагрузки страницы или обновления домена, history.pushState может выполнить эту работу.
Добавьте этот метод в свой компонент или в другое место, чтобы сделать это: 

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

Поэтому в любом месте вашего компонента вызовите addHashToLocation('/my/new/path'), чтобы указать текущее местоположение с параметрами запроса в стеке window.history.

Чтобы добавить параметры запроса в текущее местоположение без добавления новой записи в историю , вместо этого используйте history.replaceState.

Должно работать с Vue 2.6.10 и Nuxt2.8.1.

Будьте осторожны с этим методом!
Vue Router не знает, что URL изменился, поэтому он не отражает URL после pushState.

Поскольку 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)
...