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

Question

I have a Filter tab component. That i used in different routes. Whenever click on any tab it is being active. After clicking one i want to make the same tab to be active in other routes also. How can i do so? Any article or suggestion will be really helpful.

Here's my filter tab component

<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

I would highly recommend Vuex as per previous comments. But since you are asking for other solutions. Here are some not so elegant approaches:

1. Global Event Bus - keep the active tab in a global EventBus state that will also listen to changes, and emit changes. As this will not be destroyed between routes, you can get the event bus state on route change (component mount/create).

2. Use Portal-Vue to teleport filter tab component on demand to other views/routes keeping it's state. More: https://github.com/LinusBorg/portal-vue

3. Keep active tab in url hash https://example.com/#tab-1 or URLSearchParam https://example.com/route1?tab=2 . And load param/hash on route change/component mount. The biggest downside to that is that you need to manually pass the hash or URL search param to every link.