vue页面刷新上一页路由

### Vue 页面刷新后返回上一页路由的解决方案

#### 使用 `beforeunload` 和 `sessionStorage`

为了确保用户在刷新页面之后仍然能保持之前的浏览状态，可以在页面即将卸载之前保存当前的状态到 `sessionStorage` 中。当页面加载时读取这些存储的数据，并利用编程式的导航恢复用户的最后位置。

// main.js 或者全局混入中定义
window.addEventListener('beforeunload', () => {
    const currentRoute = JSON.stringify(router.currentRoute.value);
    sessionStorage.setItem('lastVisitedPage', currentRoute); // 将当前路由信息存入 session storage
});

router.beforeEach((to, from, next) => {
    let lastVisited = sessionStorage.getItem('lastVisitedPage');
    if (lastVisited && !from.name) { // 如果存在上次访问记录且不是通过其他页面跳转过来，则重定向至上一次的位置
        try {
            lastVisited = JSON.parse(lastVisited);
            next({ ...lastVisited });
        } catch (_) {
            next();
        }
    } else {
        next();
    }
});

此方法适用于大多数场景下的简单应用，在更复杂的应用程序里可能还需要考虑更多因素如权限验证等[^1]。

#### 利用 Vuex 存储状态

对于有较多交互逻辑的应用来说，可以借助 Vuex 来管理共享状态。每当发生路由改变事件时都将必要的参数同步至 store；而在每次初始化组件前先从 store 获取所需的信息以填充视图层。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);

app.use(store).use(router).mount('#app');

// 在适当的地方设置 watch 监听 $route 变化并将重要数据 commit 至 vuex state
watch(() => route.params.id, newValue => {
    store.commit('updateCurrentItemId', newValue);
}, { immediate: true });

// 组件内部 mounted 钩子函数内拉取最新 item 数据
async mounted() {
    await this.fetchItemData(this.$store.state.itemId);
}

这种方法不仅解决了刷新后的参数丢失问题，还使得整个系统的可维护性和扩展性得到了提高[^4]。

#### 合理运用 Hash 模式或 History API

如果项目允许的话，切换到 hash 模式 (`mode: 'hash'`) 是一种快速有效的办法来规避服务器端配置带来的麻烦。因为在这种模式下 URL 的变化不会引起真正的 HTTP 请求发送给服务器，而是由前端自行解析处理。

然而，考虑到 SEO 效果以及美观度等因素，通常推荐采用 history 模式配合正确的服务端配置（比如 Nginx/Apache），这样既可以获得良好的用户体验又不影响搜索引擎抓取效果[^3]。