Приложение Vue автоматически изменяет положение # в URL-адресе при нажатии на ссылку кнопки

#vue.js #vuejs2 #vue-router

#vue.js #vuejs2 #vue-маршрутизатор

Вопрос:

У меня вопрос с маршрутизатором vue. Я работаю над пользовательской библиотекой vue, большая часть кода которой уже была создана до меня. Мой вопрос связан с попыткой заставить страницу использовать кнопку «Назад» на странице, которая работает в процессе регистрации (она работает на всех других страницах, кроме этой конкретной страницы).

Я не совсем уверен, что именно происходит с тем, почему он действует определенным образом с ‘#’, что, я полагаю, будет проблемой:

Поток приложения должен выглядеть следующим образом:

  1. http://localhost:8080/#/events , нажатие кнопки «Продолжить» переходит на следующую страницу (страницу продукта).

  2. http://localhost:8080/#/product , нажатие кнопки «Продолжить» переходит на следующую страницу (страница обновления).

  3. http://localhost:8080/upgrade #/, нажатие кнопки «Продолжить» переходит на следующую страницу (страница оплаты).

На каждой странице есть кнопка возврата на страницу, чтобы вернуться к предыдущей. Перейдя от «/ upgrade # /» и нажав кнопку «Назад», приложение выдает мне ссылку на пустую страницу с этим URL:

http://localhost:8080/upgrade#/product

Я не уверен, когда мы находимся на странице:

http://localhost:8080/#/product

и нажмите кнопку Продолжить, почему ‘#’ перемещается после ‘ / upgrade’.

Это наш метод, который мы используем для изменения страниц:

 changeRoute() {
    this.$router.push("/product");
}
  

Ответ №1:

Что вы хотите, так это перевести режим vue-router в историю.

 const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
  

Режим по умолчанию для vue-router — режим хэширования, поэтому вы видите это поведение.

Комментарии:

1. Спасибо за ответ! Будет ли это мешать каким-либо другим маршрутам, которые уже были созданы в приложении, которые работают в настоящее время?