Vue: реквизиты переданы в роутер-линк

Question

Я хочу, чтобы в моем веб-приложении было 3 основных части:

• App.vue - на этой странице есть только тег <router-view> и некоторая общая конфигурация + она выбираетAPI каждую секунду
• ControlPanel.vue - эта страница отображает некоторые данные, которые получает страница App.vue
• Profile.vue - эта страница визуализируетнекоторые данные, которые получает страница App.vue тоже

Прямо сейчас я настроил свой App.vue с помощью вызова API, и он передает полученные данные на две страницы с помощьюреквизит, как в следующем примере.Как вы можете видеть, когда он монтируется, он запускает цикл, который длится 1 секунду, когда он идет и выбирает API, а затем возвращает его на два маршрута.

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'control_panel', params: { APIlogs } }">Control panel</router-link>
      <span> | </span>
      <router-link :to="{ name: 'profile', params: { APIlogs } }">Profile</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      APIlogs: '',
    };
  },
  mounted() {
    setInterval(() => this.refreshData(), 1000);
  },
  methods: {
    refreshData() {
      axios.get('http://192.168.30.65:5000/logs')
      .then((response) => {
          this.APIlogs = response.data;
      });
    },
    },
};
</script>
<style>
 ...
</style>

С другой стороны, Панель управления иПрофиль - это, по сути, одна и та же страница, и они должны получить реквизит от "отца" и использовать его для визуализации данных, но сейчас он не работает.Когда я нажимаю на один из маршрутов, он показывает мне значение, которое опора имеет в данный момент, и не обновляется, поскольку страница App.vue получает все больше и больше данных.

<template>
  <div id="app">
    {{APIlogs}}
  </div>
</template>

<script lang="ts">
import axios from 'axios';

export default {
  name: 'control-panel',
  props: ['APIlogs'],
  data() {
    return {
    };
  },
  mounted(){
    console.log(this.APIlogs);
  },
  methods: {
  },
};
</script>

<style>
 ...
</style>

СделаноЯ что то не так делаю?Достаточно ли хороша моя реализация или нет?Действительно надеюсь, что кто-то может помочь мне с этим, это действительно разрывает меня на части.

Заранее большое спасибо

РЕДАКТИРОВАТЬ

Просто датьнемного больше контекста, перед тем, как иметь реквизиты, я вызывал один и тот же API-интерфейс из обоих компонентов, и он показался мне очень неэффективным, поэтому я переключился на этот метод.

Также мой router.ts выглядиткак это:

import Vue from 'vue';
import Router from 'vue-router';
import ControlPanel from '../src/components/ControlPanel.vue';
import Profile from '../src/components/Profile.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'control_panel',
      component: ControlPanel,
      props: true,
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile,
      props: true,
    },
  ],
});

Answer 1

Через некоторое время и почти весь день, потраченный впустую на эту проблему, я обнаружил эту статью , которая помогла мне достичь моей цели.Я только что создал файл со всеми своими вызовами API и вызываю его каждый раз, когда мне нужно что-то получить.Я думаю, это более элегантное и интеллектуальное решение.

Answer 2

Простой способ сделать эту работу - просто сделать ваш APIlogs объектом.Затем он будет передан по ссылке, и любые обновления будут отражены в других компонентах ..

export default {
  data() {
    return {
      APIlogs: {logs: ''},
    };
  },
  mounted() {
    setInterval(() => this.refreshData(), 1000);
  },
  methods: {
    refreshData() {
      axios.get('http://192.168.30.65:5000/logs')
      .then((response) => {
          this.APIlogs.logs = response.data;
      });
    },
    },
};

---

<template>
  <div id="app">
    {{APIlogs.logs}}
  </div>
</template>

PS: Вы, вероятно, должны использовать clearInterval в своем beforeDestroyкрюк.

Answer 3

внутри ваших путей нет параметров, т.е.: path: '/:apilogs'

Динамический сегмент обозначается двоеточием :.При сопоставлении маршрута значение динамических сегментов будет отображаться как this.$route.params в каждом компоненте.
( источник )