admin管理员组文章数量:1321592
I am developing an application with Vue and Laravel. Laravel is controlling my routes and I'm not using the vue-router
.
I am conditionally loading some ponents based on the state of an object in my parent ponents data.
I have this method in my parent ponent:
activateListingForm: function() {
this.listingFormActive = !this.listingFormActive;
}
This method is triggered by a button that will change this.listingFormActive
to true or false.
I then have this in the template of the ponent:
<transition name="slide-fade">
<create-listing-form v-if="listingFormActive"></create-listing-form>
<listings-table v-else></listings-table>
</transition>
A problem that I am having is that some users are clicking the browser back button expecting the last ponent to load. I'm wondering if there is a way to change the state based on the back button?
Thanks
I am developing an application with Vue and Laravel. Laravel is controlling my routes and I'm not using the vue-router
.
I am conditionally loading some ponents based on the state of an object in my parent ponents data.
I have this method in my parent ponent:
activateListingForm: function() {
this.listingFormActive = !this.listingFormActive;
}
This method is triggered by a button that will change this.listingFormActive
to true or false.
I then have this in the template of the ponent:
<transition name="slide-fade">
<create-listing-form v-if="listingFormActive"></create-listing-form>
<listings-table v-else></listings-table>
</transition>
A problem that I am having is that some users are clicking the browser back button expecting the last ponent to load. I'm wondering if there is a way to change the state based on the back button?
Thanks
Share Improve this question edited Apr 21, 2018 at 22:04 Nick Maddren asked Apr 21, 2018 at 17:24 Nick MaddrenNick Maddren 6614 gold badges9 silver badges21 bronze badges 1- I think this is what you'd want to use stackoverflow./questions/1462719/… – Derek Pollard Commented Apr 21, 2018 at 22:19
1 Answer
Reset to default 5It's doable. My colleagues and I had to do something similar while working on this page.
For it to work,
- url is the source of truth of what the value of
listingFormActive
should be - the state of
listingFormActive
should be stored in url everytime it changes. - the initial state of
listingFormActive
should be retrieved from url
First, watch listingFormActive
. Everytime the state change, perform pushState to store its state as a url query.
watch: {
listingFormActive: {
handler(v) {
history.pushState({
listingFormActive: v
}, null, `${window.location.pathname}?listingFormActive=${v}`);
}
}
}
Add some utility method for getting url query
methods: {
currentUrlQuery() {
return window.location.search
.replace("?", "")
.split("&")
.filter(v => v)
.map(s => {
s = s.replace("+", "%20");
s = s.split("=").map(s => decodeURIComponent(s));
return {
name: s[0],
value: s[1]
};
});
},
getListingFormActive() {
return this.currentUrlQuery().filter(obj => obj.name === 'listingFormActive').value;
}
}
the initial state of listingFormActive
should be based on what you saved in the url
data() {
return {
listingFormActive: this.getListingFormActive() == 'true' ? true : false
}
},
本文标签: javascriptState history with browser back button vuejsStack Overflow
版权声明:本文标题:javascript - State history with browser back button vue.js - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742107312a2421081.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论