Question

我想在我的Web应用程序中包含三个主要部分：

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

现在，我使用API调用设置了 App.vue ，它使用以下示例将其收到的数据传递给了两个页面。如您所见，它挂载时会启动一个循环，持续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：您可能应该在clearInterval钩中使用beforeDestroy。

Vue：道具传递到路由器链接

3 个答案: