如何在路由更改后继续在HTML中显示Js var？

// 设置变量
localStorage.setItem('myVar', 'Hello, World!');

// 在页面加载时获取变量
window.onload = function() {
    var myVar = localStorage.getItem('myVar');
    document.getElementById('displayArea').innerText = myVar;
};

// 设置变量
sessionStorage.setItem('myVar', 'Hello, World!');

// 在页面加载时获取变量
window.onload = function() {
    var myVar = sessionStorage.getItem('myVar');
    document.getElementById('displayArea').innerText = myVar;
};

// 设置变量并导航到新页面
var myVar = 'Hello, World!';
window.location.href = '/new-page?var=' + encodeURIComponent(myVar);

// 在新页面加载时获取变量
window.onload = function() {
    var urlParams = new URLSearchParams(window.location.search);
    var myVar = urlParams.get('var');
    document.getElementById('displayArea').innerText = myVar;
};

// 在Vue组件中
export default {
    data() {
        return {
            myVar: ''
        };
    },
    created() {
        this.myVar = localStorage.getItem('myVar') || 'Default Value';
    },
    watch: {
        myVar(newVal) {
            localStorage.setItem('myVar', newVal);
        }
    }
};