Javascript 如何在非单页中的Vue页面之间共享数据

我有两页索引和产品。在某些国家/地区列出的资产净值相同。在“产品”页面上，当您单击某个国家的复选框时，您将筛选产品并显示该国家的产品。 我想在索引页上，当你点击一个复选框重定向到产品页面和过滤数据。我尝试的是创建一个重定向方法，如

onClickRedirect(name){
   window.location.href = "products.php"
}

我在点击输入时调用这个方法

 <div class="form-check" v-for="country in countries">
     <input type="checkbox" :id="country.name" class="form-check-input" v-bind:value="country.name" v-model="checkedCountries" @click="onClickRedirect(country.name)">
     <label :for="country.name"> {{country.name}}</label>
</div>      

{{country.name}

v-model=“checkedCountries”应该保存选中的国家，但当它重定向时，它会刷新，并且再次为空，这就是我使用该方法并作为参数country name发送的原因。如何保存已传递的名称并将其选中，以便在产品页面上立即显示已过滤的数据

这是用于筛选的代码：

var app = new Vue({
    el:'#app',
    data: {
        products:[],
        countries: [],
        checkedCountries: [],
        message: null,
        page: 1,
        perPage:16,
        load: false,
    },

    mounted(){
        axios
        .get('http://gin.jointdots.com/api/v1/public/categories')
        .then(response =>{
            this.countries = response.data.data
        })
        axios
        .get('http://gin.jointdots.com/api/v1/public/products')
        .then(response =>{
            this.products = response.data.data
        })
    },
    computed:{     
        filteredProducts(){ 
            if(!this.checkedCountries.length){
                return this.products
            }
            const filtered_products= this.products.filter( product => this.checkedCountries.includes(product.categories[0].name))
            if(this.checkedCountries.length && !filtered_products.length){
                this.message = "There are no products to show"
            }else{
                this.message = null
            }
            return filtered_products
        },
        pages(){
            return Math.ceil(this.filteredProducts.length / this.perPage)
        },    
        computedProducts(){
            if(this.pages === 1){
                setTimeout(() => {
                    this.load = true 
                }, 500);
                return this.filteredProducts
                                 
            }else{
                const firstIndex = (this.page -1) * this.perPage
                const lastIndex = this.page * this.perPage
                window.scrollTo(0,0)
                setTimeout(() => {
                    this.load = true 
                }, 500);
               return this.filteredProducts.slice(firstIndex,lastIndex)
                
            }
        },
        
    },
    methods:{
        changePage (val){
            switch(val){
                case 0 : this.page = 1 ; break;
                case -1: this.page = this.page > 1 ? this.page - 1 : this.page ; break; 
                case 1: this.page = this.page < this.pages ? this.page + 1 : this.page ; break; 
                case this.pages: this.page = this.pages; break;
            }
            
        },
        clickCallback(pageNum){
            this.page = Number(pageNum)
        },
        onClickRedirect(name){
            window.location.href = "products.php"
        }
    }

})

var-app=新的Vue({
el:“#应用程序”，
数据：{
产品：[]，
国家：[]，
已核查国家：[]，
消息：空，
页码：1，
每页：16，
加载：false，
},
安装的（）{
axios
.get（'http://gin.jointdots.com/api/v1/public/categories')
。然后（响应=>{
this.countries=response.data.data
})
axios
.get（'http://gin.jointdots.com/api/v1/public/products')
。然后（响应=>{
this.products=response.data.data
})
},
计算：{
filteredProducts（）{
如果（！this.checkedCountries.length）{
退回此产品
}
const filtered_products=this.products.filter（product=>this.checkedCountries.includes（product.categories[0].name））
if（this.checkedCountries.length&！filtered_products.length）{
this.message=“没有要显示的产品”
}否则{
this.message=null
}
退回已过滤的产品
},
第（）页{
返回Math.ceil（this.filteredProducts.length/this.perPage）
},    
计算产品（）{
如果（this.pages==1）{
设置超时（（）=>{
this.load=true
}, 500);
返回此.filteredProducts
}否则{
const firstIndex=（this.page-1）*this.perPage
const lastIndex=this.page*this.perPage
窗口。滚动到（0,0）
设置超时（（）=>{
this.load=true
}, 500);
返回此.filteredProducts.slice（firstIndex，lastIndex）
}
},
},
方法：{
更改页（val）{
开关（val）{
案例0:this.page=1；中断；
案例1:this.page=this.page>1？this.page-1:this.page；中断；
案例1:this.page=this.page

在这样的页面之间传递数据的最佳、最简单的方法是在散列之后放置一个查询字符串，例如products.php#country=france。在products.php中，您需要解析查询字符串。将此代码复制到parseArgs.js中，并在需要执行此操作的任何页面中使用它

// 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
})();

//例如，对于静态页面，在散列之后解析参数
//myPage.html#myArg=myVal&anotherArg=anotherVal
//在您的页面中，参数是页面上的命名属性
//args对象，所以args.myArg
//如果需要通过querystring传递url，
//最后放在一个参数“src”中。
变量args=（函数（）{
var returnVal={}；
var argString=window.location.hash；
//src之后的所有内容都属于url的一部分，不需要解析
var argsAndSrc=argString.split（/src=/）；
returnVal[“src”]=argsAndSrc[1]；
//src之前的所有内容都是此页面的参数。
var argArray=argsAndSrc[0]。拆分（“&”）；
对于（变量i=0；i

另一种方法是使用本地存储在页面之间检索信息

下面是一个使用localStorage的示例

---

您好，我认为其中一种方法是将选定的国家存储在localStorage中，然后在产品页面上访问该国家的名称。另一种方法（更好的方法）是使用Vuex，在这里您可以全局管理状态并轻松存储和访问值。感谢您，它与localStorage一起工作：）Vuex在这里不是一个选项，因为在一个页面和另一个页面之间存在完全重新加载。LocalStorage可以工作，但请记住在之后进行清理。东西将永远挂在本地存储中。是的，我注意到，我需要在重新加载页面时进行清理，但无法确定本地存储是否适用于该部分，但当我刷新产品页面时，它会将名称保存在本地存储中，并在安装组件之前按该名称显示产品。。。您可以清除本地存储。这可能是在页面刷新的情况下，也可能是在I window.location.href重新加载页面时

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