Vue.js Маршрутизация с помощью кнопки возврата

Question

Я уже использую это приложение для примера маршрутизации Vue.js.

https://github.com/chrisvfritz/vue-2.0-simple-routing-example 

В src/main.js У меня есть так много значения данных.

const app = new Vue({ 
    el: '#app', 
    data: { 
    currentRoute: window.location.pathname, 
    token : "", 
    errorMessage : '', etc...etc.. 
    }, 

Теперь Socket.io я установить маркер "sdawdda2d2ada2ad22ad"

При запуске приложения, чем currentRoute равно с "/" Его Окей, на первой странице, загруженной. src/routes.js

'/': 'Home', 
'/about': 'About' 

Когда я хочу, чтобы проверить/о (URL: localhost:8080/about), чем его работы хорошие, но маркер и ErrorMessage снова пуст, потому что приложение создано еще раз.

Если я хочу, чтобы изменить страницу, не потерять значение маркеров я могу использовать:

this.currentRoute = "/about"  (url: localhost:8080) 

Его работает хорошо, но не изменить URL, так что я не могу использовать кнопку назад в браузере. Как я могу отделить мое приложение Vue, если я не хочу потерять значение токена, когда браузер переходит в/о?

Большое спасибо!

Answer 1

Когда вы переезжаете с маршрута Home до маршрута About, вам необходимо использовать <router-link> для навигации.

С вашей home странице, вы можете перейти на страницу about следующим образом:

<router-link to="/about">Go to my About Page</router-link> 

, который генерирует регулярный HTML тега привязки <a> с пути установлен правильно. Когда вы нажмете на это, он перенесет вас в компонент about и не обновит всю веб-страницу html (с скриптами приложения) с сервера.

Когда изменяется только компонент маршрута, все остальные параметры Vue, такие как токен в экземпляре Vue, останутся.

Пожалуйста, обратите внимание на vue-router здесь: http://router.vuejs.org/en/essentials/getting-started.html

Не забудьте иметь заполнитель для маршрутов в главном приложении следующим образом: <router-view></router-view>. Ваш и About компонент будет отображаться в этом router-view при изменении маршрутов.

Answer 2

вы можете сделать что-то вроде this.$router.go(-1) или vm.$router.go(-1) идти вперед this.$router.go(1) более click here