[Vuejs]-How to share data between pages Vue in non single page

The best, lightest option for passing data between pages like this is to put a query string after the hash, eg products.php#country=france. In products.php, you then need parse the query string. Copy this code into parseArgs.js, and use it in any page that needs to do this.

// For static pages, parses arguments after the hash, for example
// myPage.html#myArg=myVal&anotherArg=anotherVal
// In your page, your args are named properties on the 
// args object, so args.myArg
// If you need to pass an url with querystring,
// put it last, in an argument "src".
var args = (function () {
    var returnVal = {};

    var argString = window.location.hash;
    //everything after src belongs as part of the url, not to be parsed
    var argsAndSrc = argString.split(/src=/);
    returnVal["src"] = argsAndSrc[1];
    //everything before src is args for this page.
    var argArray = argsAndSrc[0].split("&");
    for (var i = 0; i < argArray.length; i++) {
        var nameVal = argArray[i].split("=");
        //strip the hash
        if (i == 0) {
            var name = nameVal[0];
            nameVal[0] = name.slice(1);
        }
        returnVal[nameVal[0]] = decodeURI(nameVal[1]);
    }
    return returnVal
})();

Another approach would be to use localStorage to R/W. Information between pages.

Here’s an example of using localStorage.

CodePen Demo

const app = new Vue({
 el: '#app',
 data: {
name: ''
},
mounted() {
  if (localStorage.name) {
    this.name = localStorage.name;
  }
},
watch: {
  name(newName) {
    localStorage.name = newName;
  }
}
});