vue3 路由做push 目标页面不刷新也不重新亲求怎么写怎么做

在 Vue3 中，如果你想通过路由跳转 (push) 到目标页面但既不刷新整个页面也不重新加载组件，可以利用 Vue Router 的 `meta` 特性和导航守卫 (guard) 来实现平滑的无状态切换。

首先，在需要禁止单页刷新的目标组件的路由配置中添加 `meta` 属性，设置 `cache: true`：

// router.js 或者某个路由配置文件中
{
  path: '/target-page',
  component: TargetPageComponent,
  meta: { cache: true },
}

然后，在你的路由切换逻辑中，使用 `this.$router.push` 并传递包含 `name` 或 `path` 的对象，并且设置 `{ replace: true }` 以替换当前路由而不是 push 新路由，这样就达到了无刷新的效果：

// 组件内的方法
import { useRouter } from 'vue-router';

export default {
  methods: {
    goToTarget() {
      const router = useRouter();
      router.replace({ name: 'target-page', params: {}, query: {} }, {}, { cache: true });
    },
  }
}

最后，如果你希望在特定条件下禁止缓存，可以在导航守卫中检查并处理：

// 阻止缓存的导航守卫
router.beforeEach((to, from, next) => {
  if (!to.meta.cache || /* 检查条件 */) {
    // 如果不需要缓存，则正常导航
    next();
  } else {
    // 否则使用replace操作替换当前路由
    next({
      path: to.path, // 或者直接用 to，
      replace: true,
    });
  }
});