Vue Router：浏览器返回按钮功能异常问题咨询

你的创建页（testDetailCreate）和编辑页（testDetailEdit）复用了同一个TestDetail组件，Vue Router为优化性能，默认会复用相同组件的实例。当你从编辑页点击浏览器返回按钮回到创建页时，组件实例未被销毁重建，依然保留着编辑状态的内容，所以出现路由变更但内容还是编辑表单的情况。

方案1：给<router-view>添加唯一key #

在父组件TestPage的<router-view>标签上绑定:key="$route.fullPath"，让Vue根据路由全路径判断组件实例，每次路由变化时强制重新渲染组件：

<!-- TestPage.vue -->
<template>
  <router-view :key="$route.fullPath"></router-view>
</template>

方案2：在组件内监听路由变化并重置状态 #

在TestDetail组件中监听$route变化，根据当前路由类型（创建/编辑）重置表单状态：

// ~/detail/index.ts
export default defineComponent({
  // ...
  watch: {
    $route(to) {
      if (to.name === 'testDetailCreate') {
        // 重置为创建表单的默认内容
        this.form = { /* 你的默认创建表单数据 */ };
      } else if (to.name === 'testDetailEdit') {
        // 按需加载编辑数据
        this.loadEditData(to.params.id);
      }
    }
  },
  methods: {
    loadEditData(id) {
      // 根据id获取编辑数据并赋值给表单
      // ...
    },
    // ... 其他方法
  }
})

如果使用Vue 3组合式API，写法如下：

import { useRoute } from 'vue-router';
import { watch, reactive } from 'vue';

export default defineComponent({
  setup() {
    const route = useRoute();
    const form = reactive({ /* 默认创建表单数据 */ });

    watch(route, (to) => {
      if (to.name === 'testDetailCreate') {
        // 重置表单
        Object.assign(form, { /* 默认创建表单数据 */ });
      } else if (to.name === 'testDetailEdit') {
        // 加载编辑数据
        // loadEditData(to.params.id, form);
      }
    });
    
    return { form };
  }
})

方案3：拆分创建与编辑组件 #

将创建和编辑逻辑拆分为两个独立组件（如TestCreate和TestEdit），通过组合式函数、mixins或公共组件复用重复逻辑。这样路由切换时组件会正常销毁重建，不会保留之前的状态：

// router/test_route/index.ts
import TestPage from "@/module/test/page";
import TestCreate from "@/module/test/view/create";
import TestEdit from "@/module/test/view/edit";

const route = {
    component: TestPage,
    path: "/test/page",
    redirect: ...,
    children: [
        ...,
        {
            path: 'create-test', 
            name: "testDetailCreate",
            component: TestCreate
        },
        {
            path: 'edit-test/:id?', 
            name: "testDetailEdit",
            component: TestEdit
        }
    ]
}

export default route;

内容的提问来源于stack exchange，提问作者rammi22