7.vue点击进入可复用性路径，后退保留数据

方法一：

1.跳转路由配置 path: "diskfiles"

this.$router.push({
          path: "/diskfiles",
          query: {
            id: item.id, // 文件夹id
            name: item.name, //文件夹名称
            groupId: this.$route.query.groupId,
            isDownload: this.$route.query.isDownload,
            isUpload: this.$route.query.isUpload,
            idDel: this.$route.query.idDel
          }
});



const routes = [
{
    path: "/",
    name: "home",
    component: Layout,
    redirect: "/home",
    children: [{
        path: "home",
        component: HomeView,

        meta: {
            requiresAuth: true
        }
    },
    // 个人网盘
    {
        path: "CloundDisk",
        component: CloundDisk,
        redirect: "/CloundDisk/file",
        children: [
            // 分享云盘
            {
                path: "ShareDisk",
                component: ShareDisk,
                meta: {
                    requiresAuth: true
                }
            },
        ]
    },
    // 云盘文件列表
    {
        path: "diskfiles",
        component: () => import("@/views/ShareDisk/DiskFiles.vue"),
        meta: {
            requiresAuth: true
        }
    },
    ]
},
];

2.页面后退this.$router.go(-1);

3.监听路由

  watch: {
    $route() {
      // 重新加载数据
      this.onLoad();
      // 获取userid
      this.userId = this.$store.getters.userInfo.user_id;
      // 获取传的id值
      this.parentId = this.$route.query.id;
    }
  }

方法二：

1. 跳转路由配置

{
    path: '/product/:productId',
    name: 'product',
    component: () => import('@/views/Product/index.vue'),
    props: true
  },

2.路由导航

// ---- 通过导航守卫监听路由变化，并请求对应的新商品数据 ----
onBeforeRouteUpdate((to) => {
  // 清除旧的数据
  productDetails.value = {}
  // 回到顶部
  document.body.scrollTop = 0
  document.documentElement.scrollTop = 0
  // 重新根据最新 ID 请求商品数据
  initProductDetails(to.params.productId)
})