maximvanhove/vue-router-back-button

Add a back button to your application

vue-router-back-button's Issues

Differentiate between going back and navigating to a route

Hi,
there is one problem that made this plugin unusable for me.
I need to differentiate between going back using back button and navigating through pages.

Page A => Page B => Page A (now this.$routerHistory.hasForward() returns true, even when I have not used Back button)

Vue3 support

Plugin has vue3 support?

Error when building with Uglify/webpack

Uglify fails because it hits an error:

ERROR in static/js/vendor.js from UglifyJs
Unexpected token: punc (() [./~/vue-router-back-button/dist/index.js:1,822][static/js/vendor.js:66589,891]

history.length having a maximum value of 50 causing issues

Difficult to replicate with a failing test case as it doesn't seem jest/puppetteer has this same limitation but in the latest chrome and firefox when you get to 50 routes navigated too the length of window.history.length will always be 50 from then on. This then means the push method in this library no longer pushes anything to the session storage as the check for previousBrowserHistoryLength against window.history.length will always return true

        // Check if history length has changed since last push
        // We asume the replace function was called when not
        if (this._previousBrowserHistoryLength === window.history.length) {
            return;
        }

https://www.geeksforgeeks.org/html-dom-history-length-property/#:~:text=The%20History%20length%20property%20in,can%20be%20displayed%20in%2050.

Erratic Behaviour on Nuxt 2.14.0 (Vue router 3.3.4)

Hi,
I have installed your plugin using the provided instructions.
I have the following page structure
/feed -> /teams (no Back btn added there) -> /teams/_id (A back btn added there)

Back Btn component uses provided code:

    to () {
      if (this.client || !this.$routerHistory || !this.$routerHistory.hasPrevious()) {
        return { path: '/' }
      }

      return { path: this.$routerHistory.previous().path }
    }

Once on page /teams/_id and using BackBtn, I am taken to /feed.
If I try to navigate to another team page, same results
However, if once on Teams page I refresh entirely the app, the Back Btn takes back to another Teams page I visited previously.
Doesn't make any sense... Any idea?

render function or template not defined in component: NuxtLink

I have installed and configured your package for a nuxt 2.0.0 project am working on. Doesn't seem to work, keep getting render function or template not defined in component: NuxtLink Do you know any work arounds for nuxt 2.0.0?

No typescript support

Any plans on implementing typescript types for this package?

Issue with multiple route paths

Currently the history stores the next and previous routes so that we can call .previous() and .next() but this poses a problem when some routes may sometimes be skipped.
If we programmatically move into a route in the future, the history does not acknowledge that we skipped routes and the .previous() route will not be the one where the user was previously.

For example, let´s say we have a route structure like this:

1 --- 2
 \   /
  1.1

And a user follows these steps:

• 1 -> 1.1 -> 2
  History: [ "/1", "/1.1", "/2" ]

• 2 -> 1.1 -> 1 (go back)
  History: [ "/1", "/1.1", "/2" ]

• 1 -> 2 (skipping 1.1)
  History: [ "/1", "/1.1", "/2" ]
  Go back will now take the user to /1.1 instead of /1

You can find a reproduction here

Cant use this module

I have do this npm install vue-router-back-button --save

But, I cant use this module...

What can I do?

support for vue router v3.1.3 ?

Is this supposed to work with vue-router v3.1.3 ? it doesn't seem to be tracking prev or next

History tracking does not work when history has modified by external effects.

Hi, I found history tracking is not working with loop-back address 127.0.0.1.
But It works with 192.168.219.5 (eg). (_history array is 0 length)

Below closed issue that original poster didn't response is maybe related with this issue, what I found.

I'm using Nuxt.js v2.12.0, Vue v2.6.11, node v12.9.1.

---

I'm closing this issue as there is no answer since 2 months.

Originally posted by @MaximVanhove in #3 (comment)

---

Error: $routerHistory is not defined on the instance but referenced during render

I'm having an error while trying to upgrade to the latest version (1.2.1) with the new install mechanism:

[Vue warn]: Property or method "$routerHistory" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Not tracking history

Hi, I installed your plugin but it's not tracking history. I did all the installation steps and nothing. I'm using vue 2.5.17 and vue-router 3.0.2. Is it possible I forgot to set something? Or I'm just using it the wrong way...

Add these instructions for Nuxt support for vue-router-back-button

Hi, please add this to documentation :)

in ~/plugins/vue-router-back-button.js put:

import Vue from 'vue';
import { routerHistory, writeHistory } from 'vue-router-back-button';

Vue.use(routerHistory);

export default ({ app }) => {
  app.router.afterEach(writeHistory);
};

and add it to the plugins section of nuxt.config.js:

...
  plugins: [
    ...
    { mode: 'client', src: '~plugins/vue-router-back-button.js' },
    ...
  ],
...

also here's a nuxt component for a back button. This would work for normal vue-router if you change nuxt-link to router-link:

<template>
  <nuxt-link :to="to">
    &#8592; Back
  </nuxt-link>
</template>

<script>
export default {
  computed: {
    to() {
      if (this.client || !this.$routerHistory || !this.$routerHistory.hasPrevious()) {
        // probably ssr, or hasn't navigated yet.
        return { path: '/' };
      }
      return { path: this.$routerHistory.previous().path };
    },
  },
};
</script>

I'll do a PR to modify the docs, if you want me to.