Vue单页应用如何将路由页数据传递至router-view所属父组件

项目结构 #

|- App.vue
|- + Views  
|  |- Page.vue  
|- + Components  
|  |- Slider.vue  

场景说明 #

App.vue包含负责路由渲染Page.vue的router-view容器，Slider.vue是App.vue的公共子组件。为了实现Slider组件的复用解耦，需要将用户在Page.vue点击的图片索引、全量图片数据从Page.vue传递给App.vue，再透传到Slider.vue。
此前已尝试params、props、emit方案均未成功，Page.vue基础代码如下：

<template>
    <div v-for="(item, index) in 3" :key="index"></div>
</template>

<script>
export default ({
    data() {
        return {
            urls: ['url1', 'url2', 'url3']
        }
    }
})
</script>

已验证解决方案（感谢@gengar.value） #

通过路由传参作为公共数据载体，无需经过App.vue中转，直接在Slider.vue监听路由参数变化即可实现需求，实现代码如下：

Page.vue 触发传参代码 #

methods: {
    passIndex: function (index) {
      this.$router.push({
        name: "visualization",
        params: { imgCat: "visualization", imgIndex: index },
      });
    },
  }

Slider.vue 监听参数代码 #

watch: {
    "$route.params.imgCat": function (val) {
      this.state = val;
    },
    "$route.params.imgIndex": function (newVal) {
      if (newVal != -1) this.imgState = newVal;
      this.$router.push({ params: { imgIndex: -1 } });
    }
}

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