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

在Web开发中，当页面的路由发生更改时，通常意味着用户正在导航到不同的页面或视图。如果希望在路由更改后仍然能够在HTML中显示JavaScript变量，可以通过以下几种方法来实现：

1. 使用本地存储（Local Storage）

本地存储是一种在客户端持久化存储数据的方式，即使页面刷新或路由更改，数据依然存在。

示例代码：

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

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

2. 使用Session Storage

与本地存储类似，但会话存储的数据仅在当前会话期间有效，关闭浏览器标签或窗口后数据会被清除。

示例代码：

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

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

3. 使用URL参数或查询字符串

将变量作为URL的一部分传递，这样即使路由更改，变量也可以通过解析URL来获取。

示例代码：

// 设置变量并导航到新页面
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;
};

4. 使用前端框架的状态管理

如果你使用的是现代前端框架（如React、Vue或Angular），可以利用它们的状态管理机制来保持变量在路由更改后的持久性。

Vue.js 示例代码：

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