Vue：传递给路由器链接的道具

Question

我想在我的 webapp 中有 3 个主要部分：

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

现在我使用 API 调用设置了我的 App.vue，它会将接收到的数据传递到两个页面，其中的 props 如下例所示。正如您所看到的，当它被挂载时，它会启动一个持续 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

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

动态段用冒号: 表示。当路由匹配时， 动态段的值将暴露为 this.$route.params 在每个组件中。
(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。