Vue.js history back button but keeping filter values

I've been handed a project that uses Vue.js (I'm a total noob with Vue)

I have a page that lists items based on filters. The user sets the filters and the listing page updates. The user then clicks on one of the listings and is taken to a details page that has a back button which should take the user back to the filtered listing page (keeping the selected filters) but this is not working :( Currently I was just using

But this looses all the filtering and just shows all the listings. What is the correct way to do this in Vue.js?

Suppliers.html

<section class="suppliers"> <div class="filters"> <div class="row"> <div class="column"> <form action="" v-on="reset: formResetHandler"> <div v-component="filter-expand-btn" v-ref="filter-expand-btn"></div> <div class="filters-expandable {{ expandFilter }}" v-transition="expand"> <div class="two-buttons"> <input type="reset" value="Reset"> <button class="btn" v-pointer="applyFiltersHandler">Apply</button> </div> <div v-component="suppliers-filter" v-ref="suppliersFilter"></div> </div> </form> </div> </div> </div> <div class="listing-container listing-container--filters-{{expandFilter}}"> <div class="row"> <div class="column"> <ol class="suppliers-list"> <li v-repeat="suppliers | customFilter" class="suppliers-list-item"> <a href="#/suppliers/{{id}}"> <img data-src="{{ logo }}" alt="{{ title }}"> </a> </li> </ol> <p class="listing-container__no-results" v-show="!totalSuppliers">No Suppliers found</p> </div> </div> </div> 

suppliers.js

 var Vue = require('vue'); var template = require('../views/suppliers.html'); import Lazy from '../lib/lazy'; var Suppliers = Vue.component('suppliers', { template: template, data: function () { return { suppliers: FWPA.Storage.read('Suppliers'), expandFilter: '', totalSuppliers: 1 }; }, ready: function () { this.Lazy = new Lazy(); this.Lazy.revalidate(); }, watch: { totalSpecies: function () { Vue.nextTick(() => { if (this.Lazy) { this.Lazy.revalidate(); } }); } }, filters: { customFilter: function(suppliers) { var filteredSuppliers = this.$.suppliersFilter.customFilter(suppliers); this.totalSuppliers = Object.keys(filteredSuppliers).length; return filteredSuppliers; } }, methods: { formResetHandler: function (e) { this.$.suppliersFilter.resetFilters(); Vue.nextTick(() => { if (this.Lazy) { this.Lazy.revalidate(); } }); this.expandFilter = ''; }, applyFiltersHandler: function(e){ e.preventDefault(); this.expandFilter = ''; Vue.nextTick(() => { if (this.Lazy) { this.Lazy.revalidate(); } }); } } }); export {Suppliers}; 

supplier-filters.html

 <fieldset> <label for="input-supplies-to">Location Supplies</label> <select id="input-supplies-to" name="supplies-to" v-model="filterGroup.suppliesTo"> <option value="">Select location</option> <option value="ACT">Australian Capital Territory</option> <option value="NSW Rural">New South Wales - Rural</option> <option value="NSW Urban">New South Wales - Urban</option> <option value="NT">Northern Territory</option> <option value="QLD Rural">Queensland - Rural</option> <option value="QLD Urban">Queensland - Urban</option> <option value="SA">South Australia</option> <option value="TAS">Tasmania</option> <option value="VIC Rural">Victoria - Rural</option> <option value="VIC Urban">Victoria - Urban</option> <option value="WA">Western Australia</option> <option value="Export">Export</option> </select> </fieldset> <fieldset> <label for="input-species">Species / Product</label> <select id="input-species" name="species" v-model="filterGroup.species"> <option value="">Select Species</option> <option v-repeat="allSpecies" value="{{ id }}">{{ title }}</option> </select> </fieldset> 

supplier-filters.js

var Vue = require('vue'); var template = require('../views/suppliers-filter.html'); var SuppliersFilter = Vue.component('suppliers-filter', { template: template, data: function() { try { // Get all categories in Applications category var allApplications = FWPA.Storage.getAllByProp(FWPA.Storage.read('Categories'), 'title', ['Applications', 'applications'])[0]; if (!allApplications) { throw('FWPA - Cannot find category with name "Applications"'); } } catch (e) { console.warn(e); } return { allSpecies: FWPA.Storage.read('Species'), allApplications: allApplications, filterGroup: { suppliesTo: '', species: '', application: '' } }; }, methods: { resetFilters: function() { var tempGroup = {}; for (var filterItem in this.filterGroup) { tempGroup[filterItem] = ''; } this.filterGroup = tempGroup; }, /** * Loops over all filterable properties and applies a filter for each * @param suppliers * @returns Array */ customFilter: function(suppliers) { var filteredSuppliers = suppliers; // Apply filter for all filterable properties for (var filterItem in this.filterGroup) { let filterVal = this.filterGroup[filterItem]; // only apply if filter is set if(filterVal) { // Map applications filter to "categories" property on suppler if (filterItem === 'application') { filterItem = 'categories'; } // Expect integers for supplier.categories and supplier.species if(filterItem === 'categories' || filterItem === 'species') { filterVal = parseInt(filterVal); } filteredSuppliers = this.standardFilterTest(filterItem, filterVal, filteredSuppliers); } } return filteredSuppliers; }, /** * Check for a filter against a single supplier * Checks in arrays on subject and a direct match * @param filterName * @param filterVal * @param suppliers * @returns {*} */ standardFilterTest: function(filterName, filterVal, suppliers) { return suppliers.filter((singleSupplier) => { if (!singleSupplier.hasOwnProperty(filterName)) { return false; } // Check for filter value in array OR do an exact match if( (Array.isArray(singleSupplier[filterName]) && singleSupplier[filterName].indexOf(filterVal) !== -1) || singleSupplier[filterName] == filterVal) { return singleSupplier; } else { return false; } }); } } }); export {SuppliersFilter}; 

supplier-detail.html (the back button is up the top with a comment)

<section class="supplier-detail"> <div class="title-bar-strong"> <a onclick="window.history.back();" class="topbar-back-button"><img src="img/back.png" /></a> <!-- THIS IS THE ISSUE --> <h1>{{ title }}</h1> </div> <div class="row"> <div class="column"> <img class="supplier__logo" src="{{ logo }}" alt="{{ title }}"> <h2 class="supplier__sub-title">{{subTitle}}</h2> <p class="supplier__description">{{description}}</p> <p v-show="websiteURL"><a href="{{ websiteURL }}">{{ websiteURL }}</a></p> <a v-show="brochureUrl" href="{{ brochureUrl }}" class="supplier__download-link btn-solid" download="{{brochureUrl}}" target="_blank" v-on="click: $parent.downloadHandler">Download Brochure</a> </div> </div> <div v-show="fullSpecies"> <h4>Species</h4> <ul class="supplier__species-list"> <li v-repeat="fullSpecies"> <a href="#/species/{{id}}"> <img class="supplier__species-list__logo" src="{{ logo }}" alt="{{ title }}"> <span>{{ title }}</span> </a> </li> </ul> </div> <div v-show="contacts"> <h4>Contacts</h4> <div class="contacts-list" v-repeat="contacts"> <div class="row"> <div class="column"> <h5>{{ title }}</h5> <address> {{ address }} </address> <a v-show="email" href="mailto:{{ email }}">E: {{ email }}</a><br/> <a v-show="phone" href="tel:{{ phone }}">T: {{ phone }}</a><br/> <a v-show="fax" href="{{ fax }}">F:{{ fax }}</a> </div> </div> <simple-map v-if="$parent.$parent.online" lat="{{ lat }}" lng="{{ lng }}" id="{{ $index }}" title="{{ title }}"></simple-map> </div> </div> </section>