vue3+vant3 列表点击跳到详情页，点击返回不加载

Vue 3 结合 Vant 3 可以通过编程式导航实现列表点击跳转到详情页的功能。在这种情况下，通常使用 Vue Router 来管理前端路由。当点击列表项时，可以通过 `router.push` 方法来跳转到详情页的路由。而点击返回按钮通常是在详情页触发，要实现点击返回不重新加载页面的效果，可以利用 Vue Router 的 `keep-alive` 功能，将详情页组件缓存起来。具体实现步骤如下：

1. 定义路由时，为需要缓存的详情页设置 `meta` 字段，并使用 `keep-alive` 标记。
2. 在详情页中，监听 `activated` 和 `deactivated` 生命周期钩子，来判断组件是进入还是离开。
3. 在点击返回按钮时，可以通过编程式导航触发路由的前进或后退操作，由于使用了 `keep-alive`，页面不会重新加载。

下面是一个简单的代码示例：

// router.js
const routes = [
  {
    path: '/detail/:id',
    name: 'Detail',
    component: DetailPage,
    meta: { keepAlive: true },
  },
  // ...其他路由
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

// DetailPage.vue
export default {
  name: 'DetailPage',
  data() {
    return {
      // 页面数据
    };
  },
  activated() {
    // 组件被激活时触发，即用户返回到详情页
    console.log('Detail page activated');
  },
  deactivated() {
    // 组件被停用时触发，即用户离开详情页
    console.log('Detail page deactivated');
  },
};

在实际应用中，你可能还需要处理列表与详情页之间的数据同步问题，以及确保页面状态的正确管理。