Vue Router: это. $ Router.push перейти к новому URL?

Question

Я прочитал документацию по vue-router (https://router.vuejs.org/guide/essentials/navigation.html)

. Этот метод вызывается внутренне, когда вы нажимаете a, поэтому щелчок эквивалентен вызову router.push (...)

Насколько я знаю, щелкнув элемент router-link, можно перейти к URL-адресу, помещенному в атрибут «to». Однако, согласно History API (https://developer.mozilla.org/en-US/docs/Web/API/History_API#Examples), history.pushState (...) только изменяет историю и не переходит на новый URL.

Итак ... как мы можем объяснить это противоречие?

Answer 1

Здесь нет противоречия.Нет причин, по которым Vue Router не мог изменить URL-адрес с помощью истории API и изменить компонент, отображаемый в различных компонентах просмотра маршрутизатора.

Когда вы включаете router-link в свой код,это компонент, как и любой другой.Vue отобразит этот компонент .Интересная часть такова:

const router = this.$router

// And later
const handler = e => {
  if (guardEvent(e)) {
    if (this.replace) {
      router.replace(location)
    } else {
      router.push(location)
    }
  }
}

const on = { click: guardEvent }
if (Array.isArray(this.event)) {
  this.event.forEach(e => { on[e] = handler })
} else {
  on[this.event] = handler
}

Для истории API вы можете увидеть в источнике , что для this.$router.push(..) мы переходим, и мы выдвигаем состояние с помощью эта функция pushState .Сам переход можно найти в history / base.js .

Answer 2

Я думаю, вам нужно точно определить, что вы подразумеваете под «переходом на новый URL»;для меня это может означать либо перезагрузку страницы с новым URL, либо просто изменение URL в адресной строке без перезагрузки страницы.

history.pushState() действительно меняет URL, но это не вызывает браузервыполнить полную перезагрузку страницы, как обычно, когда вы нажимаете на ссылку.Так работают «одностраничные приложения» - они перехватывают <a> клики и используют history.pushState() для предотвращения перезагрузки страницы.

history.pushState (...) только изменяет историю ине переходит на новый URL.

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