将数据从路由传递到路由器视图主体

Question

我有一个具有以下结构的单页应用程序。

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

编辑 1：感谢@gengar.value 的解决方案 我通过从Page.vue 传递参数解决了这个问题

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

App.vue 包含路由Page.vue 的router-view 容器
Slider.vue 是App.vue 的一个组件

我想将点击图像的索引和整个图像数据从Page.vue 传递给App.vue，然后再传递给Slider.vue，以实现Slider 与Page 的解耦以实现可重用性目的。

如何从Page.vue 也传递用户选择的索引App.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>

提前致谢

编辑 1：感谢@gengar.value 的解决方案

通过Page.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 } });
    }

Answer 1

我的解决方案有点复杂，但非常原生，因为我只使用了 Props 和 Emit。

您想在兄弟组件之间传递值，因此您可以简单地尝试以下方式：

App.vue

<template>
  <div>
    <Page :data="data" @syncData="syncData" />
    <Slider :data="data" />
  </div>
<template>

<script>
import Page from './Views/Page.vue'
import Slider from './Components/Slider.vue'

export default ({
  components: {
    Page,
    Silder
  },
  data() {
    return {
      data: []  // init data in the parent component
    }
  },
  methods: {
    syncData(updatedImages) {
      this.data = updatedImages
    }
  }
})
</script>

页面.vue

<template>
  <div></div>
<template>

<script>

export default ({
  props: {
    data: { type: Array, default: () => [] }
  },
  methods: {
    onSelectImage(images) {
      this.$emit('syncData', images) // update selected data to App.vue
    }
  }
})
</script>

Slider.vue

<template>
  <div></div>
<template>

<script>

export default ({
  props: {
    data: { type: Array, default: () => [] }
  },
  watch: {
    data: {
      handler(val) {
        // when Page.vue emits updated data to App.vue,
        // App.vue will pass data to Slider.vue
        // and you could receive the updated data 'val' here
      },
      deep: true
    }
  }
})
</script>

更新：对不起，我之前误解了。如果你使用 vue-router 组件并分配了不同的路径（例如'/page'和'/slider'），你可以使用

this.$router.push({ path: '/path', query: selectedImage })

在 Page.vue 中并在 Slider.vue 中获取 url 查询。

替代方法可以使用 Cookie.js 或 sessionStorage（虽然不太好）。如果具体情况适合你，你也可以试试 Vuex。