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?

don't use that example... use the official Vue Router library router.vuejs.org/en — Jeff
– Jeff, Commented Oct 21, 2016 at 17:58

Kartik Garasia · Accepted Answer · 2019-02-13 16:17:54Z

36

you can do something like this.$router.go(-1) or vm.$router.go(-1) to go forward this.$router.go(1) for more click here

edited Feb 13, 2019 at 16:17

answered Sep 6, 2017 at 21:09

Kartik Garasia

1,4541 gold badge19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

beingyogi Over a year ago

If i follow your method the props which were present in the previous page would be set to null. Is there a way to maintain the prop value while routing to the previous page.

dotNET Over a year ago

@beingyogi: I'd simply store prop values in localStorage before navigating to another page and reload them in mounted() event. This works with browser's own Back button too.

hama99o · Accepted Answer · 2022-01-07 12:20:11Z

6

simple way

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

answered Jan 7, 2022 at 12:20

hama99o

811 silver badge6 bronze badges

Comments

Mani Jagadeesan · Accepted Answer · 2016-10-21 18:03:02Z

3

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.

answered Oct 21, 2016 at 18:03

Mani Jagadeesan

24.3k6 gold badges70 silver badges54 bronze badges

2 Comments

ketom Over a year ago

Thanks, so much, i will try this. But its hard for me, because im not good in front-end tech. But i try it :)

Ben Over a year ago

Getting started link changed to: router.vuejs.org/guide

Collectives™ on Stack Overflow

Vue.js Routing with back button

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related