将同一个 Vue 组件的变化反映到不同的路由

Question

我有一个过滤器选项卡组件。我在不同的路线中使用过。每当单击任何选项卡时，它都处于活动状态。单击一个后，我想让相同的选项卡在其他路由中也处于活动状态。我该怎么做？任何文章或建议都会很有帮助。

这是我的过滤器选项卡组件

<template>
  <div class="filter-container">
    <div
      v-for="(item, index) in items"
      :key="index"
      v-ripple
      :identifier="random()"
      :class="[`item i${item.id}`, { 'active': activeId == item.id }]"
      @click="scrollInto(item.id, $event)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterTabs',
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      activeId: this.items.length ? this.items[0].id : null,
    };
  },
  watch: {
    items(newValue, oldValue) {
      this.activeId = newValue[0].id;
    },
  },
  methods: {
    scrollInto(id, event) {
      this.activeId = id;
      setTimeout(() => {
        const identifier = event.target.attributes.identifier.value;
        document.querySelectorAll(`[identifier='${identifier}']`)[0].scrollIntoView({
          behavior: 'smooth', block: 'center', inline: 'center',
        });

        // var selectors = document.querySelectorAll(`.i${id}`);

        // selectors.forEach((node) => {
        //   node.scrollIntoView({
        //     behavior: 'smooth', block: 'center', inline: 'center',
        //   });
        // })
      }, 100);
      this.$emit('onTagChange', id);
    },
    random() {
      return Math.random().toString(36).substr(2, 9) + '-' + Math.random().toString(36).substr(2, 9);
    },
  },
};
</script>

Answer 1

根据之前的评论，我强烈推荐 Vuex。但是由于您要求其他解决方案。这里有一些不太优雅的方法：

Global Event Bus - 将活动选项卡保持在全局 EventBus 状态，该状态也将侦听更改并发出更改。由于这不会在路由之间被破坏，您可以在路由更改时获取事件总线状态（组件 mount/create）。
使用 Portal-Vue 按需将过滤器选项卡组件传送到其他 views/routes 保持其状态。更多：https://github.com/LinusBorg/portal-vue
在 url 哈希 https://example.com/#tab-1 或 URLSearchParam https://example.com/route1?tab=2 中保持活动选项卡。并在路线 change/component 装载上加载 param/hash。最大的缺点是您需要手动将散列或 URL 搜索参数传递给每个 link.

将同一个 Vue 组件的变化反映到不同的路由

Reflect changes of same Vue Component to different routes

javascript

vue.js

vue-router

vue-component

vuejs2