Vue.js Routing with back button

Question

I already use this Vue.js Routing example application.

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

In the src/main.js I have so much data value .

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

Now with socket.io i set the token to "sdawdda2d2ada2ad22ad"

When application start than the currentRoute is equal with "/" Its okey, the first page loaded. src/routes.js

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

When i want to check the /about (url: localhost:8080/about), than its works good , but the token and errorMessage is empty again, because the app created again.

If i want to change page without lose the token value i can use:

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

Its works good , but the url not change, so i cant use back button in browser. How can i separate my Vue app, if i dont want to lose token value when the browser go to /about?

Thanks so much!

Answer 1

simple way

<template lang="html">
  <div>   
    <button @click="goBack">
      Back
    </button>
  </div>
</template>
<script>
  export default {
    methods: {
      goBack() {
        this.$router.go(-1)
      }
    }
  }
</script>