Vue.js Routing with back button

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

When you are moving from your Home route to About route, you need to use <router-link> to navigate.

From your home page, you can navigate to about page as follows:

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

That generates a regular html anchor tag <a> with the path set correctly. When you click on that, it will take you to the about component, and not refresh the entire html webpage (with app scripts) from server.

When only the route component gets changed, all your other Vue params like token on the Vue instance will remain.

Please take a look at the vue-router here: http://router.vuejs.org/en/essentials/getting-started.html

Remember to have a placeholder for routes in your main app as follows: <router-view></router-view>. Your Home and About component will get rendered into this router-view as you change routes.