vue 不同path共用一个组件 切换path不刷新页面

由于我司后台管理系统大多页面都是表格表单 基本都一样，有的需求页面不能说完全相同可以说是一摸一样 只是初始化获取的数据不一样 故想path做一下区别 页面基本不动 区分一下数据请求接口 。
但是同一个组件 页面切换是不刷新数据的 研究一下解决方法 记录一下。
主要想法就是 watch 方法监听 Router.path 变化 做变量赋值 更新数据
router文件

{
    path: 'path',
      name: 'name',
      component: component1
      // 跳转页面传不同的参数 获取不同数据
      props: { key: value },
      meta: {
        ...
      }
    },
{
    path: 'path2',
      name: 'name2',
      component: component1,
      props: { key: value2 },
    },

页面监听path变化

// 监听某个值（双向绑定）的变化，一旦发生变化，调用引号里的方法，类似change事件监听
watch: {
    '$route.path': {
      handler: function (path) { 
       // 如果还存在其他页面的跳转 需要做一下同组件页面的的判断
         if(path?.key === value)
          this.Init()
        }
      },
      // immediate设为true后，则监听的这个对象会立即输出，进入页面即执行
      immediate: true
    }
  },

Init函数 (关于Dom的操作需要卸载nextTick() 里面 )

methods: {
    Init () {
      this.$nextTick(() => {
          // Dom 操作
      })
    // 回去数据
      this.getList()
    },
}

===end