Vue：传递给路由器的道具-link

Question

我想在我的网络应用程序中包含 3 个主要部分：

App.vue - 此页面只有 <router-view> 标签和一些常规配置 + 它每秒获取一个 API
ControlPanel.vue - 此页面可视化 App.vue 页面获取的一些数据
Profile.vue - 此页面可视化了 App.vue 页面也获取的一些数据

现在我使用 API 调用设置我的 App.vue 并将它接收到的数据传递给两个页面，如下所示例子。正如您所看到的，当它被挂载时，它会启动一个循环，持续 1 秒，然后获取 API 然后它 returns 它到两条路线。

<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>

另一方面，控制面板和配置文件基本上是相同的页面，它们应该从"father"获取道具并使用它来可视化数据但是正确的现在它不起作用。当我点击一条路线时，它会显示道具在那一刻的价值，并且不会随着 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>

我是不是做错了什么？我的实施是否足够好，还是在某些方面有所欠缺？真的希望有人能帮我解决这个问题，这真的让我心碎。

非常感谢

编辑

只是为了提供更多背景信息，在使用 props 之前，我从两个组件中调用了完全相同的 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

你的路径中没有参数，即：path: '/:apilogs'

A dynamic segment is denoted by a colon :. When a route is matched, the value of the dynamic segments will be exposed as this.$route.params in every component.
(source)

Answer 2

经过一段时间，几乎整个下午都浪费在这个问题上，我发现 this article 这帮助我实现了我的目标。我刚刚创建了一个包含所有 api 调用的文件，每次我需要获取某些内容时都会调用它。我认为这是一种更优雅、更智能的解决方案。

Answer 3

完成这项工作的一个简单方法是让您的 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：您可能应该在 beforeDestroy 挂钩中使用 clearInterval。

Vue：传递给路由器的道具-link

Vue: props passed to router-link

vue.js

vue-router

vue-component