maximvanhove / vue-router-back-button Goto Github PK
View Code? Open in Web Editor NEWAdd a back button to your application
License: MIT License
Add a back button to your application
License: MIT License
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.
Is this supposed to work with vue-router v3.1.3 ? it doesn't seem to be tracking prev or next
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)
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">
← 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.
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]
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)
Plugin has vue3 support?
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
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?
Any plans on implementing typescript types for this package?
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;
}
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?
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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.