Vue:传递给路由器链接的道具
[英] Vue: props passed to router-link
本文介绍了Vue:传递给路由器链接的道具的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望在我的 web 应用中有 3 个主要部分:
- App.vue - 这个页面只有
<router-view> 标签和一些常规配置 + 它每秒获取一个 API - ControlPanel.vue - 此页面将 App.vue 页面获取的一些数据可视化
- Profile.vue - 此页面将 App.vue 页面获取的一些数据可视化
现在，我使用 API 调用设置了我的 App.vue，它将接收到的数据传递给两个带有道具的页面，如下例所示.正如你所看到的，当它被挂载时，它会启动一个循环，持续 1 秒，它去那里获取 API，然后将它返回到两个路由.
<div id="应用程序"><div id="导航"><router-link :to="{ name: 'control_panel', params: { APIlogs } }">控制面板</router-link><跨度>|</span><router-link :to="{ name: 'profile', params: { APIlogs } }">Profile</router-link>
<路由器视图/>
</模板><脚本>从 'axios' 导入 axios；导出默认{数据() {返回 {APIlogs: '',};},安装(){setInterval(() => this.refreshData(), 1000);},方法: {刷新数据(){axios.get('http://192.168.30.65:5000/logs').then((响应) => {this.APIlogs = response.data;});},},};<风格>...</风格>
另一方面，控制面板和配置文件基本上是同一个页面，它们应该从父亲"那里获取道具并用它来可视化数据，但现在它不起作用.当我点击一条路线时，它会显示该道具在那一刻的价值，并且不会随着 App.vue 页面获取越来越多的数据而更新.
<div id="应用程序">{{APIlogs}}
</模板><script lang="ts">从 'axios' 导入 axios；导出默认{name: '控制面板',道具:['APIlogs']，数据() {返回 {};},安装(){console.log(this.APIlogs);},方法: {},};<风格>...</风格>
我做错了吗?我的实现是否足够好还是在某些方面缺乏?真的希望有人能帮我解决这个问题，这真的让我心碎.
先谢谢了
编辑
只是为了提供更多上下文，在使用 props 之前，我从两个组件中调用了完全相同的 API，对我来说效率很低，所以我切换到了这种方法.
还有我的 router.ts 看起来像这样:
从'vue'导入Vue；从 'vue-router' 导入路由器；从'../src/components/ControlPanel.vue'导入控制面板；从'../src/components/Profile.vue'导入配置文件；Vue.use(路由器);导出默认的新路由器({模式:'历史'，基础:process.env.BASE_URL，路线:[{小路: '/'，名称:'控制面板'，组件:控制面板，道具:真实，},{路径:'/个人资料'，name: '个人资料',组件:配置文件，道具:真实，},],});
解决方案
一个简单的方法就是让你的 APIlogs 成为一个对象.然后它将通过引用传递，对它的任何更新都将反映在其他组件中..
出口默认{数据() {返回 {APIlogs: {logs: ''},};},安装(){setInterval(() => this.refreshData(), 1000);},方法: {刷新数据(){axios.get('http://192.168.30.65:5000/logs').then((响应) => {this.APIlogs.logs = response.data;});},},};
<小时>
<div id="应用程序">{{APIlogs.logs}}
</模板>
PS:您可能应该在 beforeDestroy 钩子中使用 clearInterval.
I want to have 3 main parts in my webapp:
- App.vue - this page only has the
<router-view> tag and some general configuration + it fetches an API every second
- ControlPanel.vue - this page visualizes some data that the App.vue page gets
- Profile.vue - this page visualizes some data that the App.vue page gets too
Right now I set up my App.vue with the API call and it passes the data it receives to the two pages with props like the following example. As you can see when it gets mounted it starts a loop that lasts 1 second where it goes and fetches the API and then it returns it to the two routes.
<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>
On the other hand, Control Panel and Profile are fundamentally the same page and they should get the props from the "father" and use it to visualize data but right now it doesn't work. When I click on one route it shows me the value the prop has in that moment and doesn't update as the App.vue page fetches more and more data.
<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>
Did I do something wrong? Is my implementation good enough or is it lacking in some way? Really hope someone can help me out with this one, it's really tearing me apart.
Thanks a lot in advance
EDIT
Just to give a bit more context, before having props I was calling the same exact API from both components and it seemd very inefficient to me so I switched to this method.
Also my router.ts looks like this:
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,
},
],
});
解决方案
An easy way to make this work is to just make your APIlogs an object. Then it would be passed by reference and any updates to it will be reflected in the other components ..
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: You should probably use clearInterval in your beforeDestroy hook.
这篇关于Vue:传递给路由器链接的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
