Question

我打算用Vue制作一个信息屏幕。目前，我有两种看法。

第一个视图在10秒钟后导航到第二个视图，反之亦然。

<template>
<div v-if="posts && posts.length">
    <table>
        <tr>
            <th>Name</th>
            <th>Start</th>
            <th>Project</th>
            <th>Activity</th>
        </tr>
        <tr v-for="post of posts">
            <td>{{post.userName}}</td>
            <td>{{post.start}}</td>
            <td>{{post.projectName}}</td>
            <td>{{post.activityName}}</td>
        </tr>
    </table>
</div>

<div v-else-if="errors && errors.length">
    <h1>error connecting to API</h1>
</div>

<script>
    import axios from "axios";

    export default {
        data() {
            return {
                posts: [],
                errors: [],
                interval: null
            };
        },
        methods: {
            loadData() {
                axios
                    .get(
                        `http://myapi.com/infoscreen.php`
                    )
                    .then(response => {
                        this.posts = response.data;
                    })
                    .catch(e => {
                        this.errors.push(e);
                    });
            }
        },
        created() {
            this.loadData();
            this.interval = setInterval(
                function () {
                    this.$router.push({path: "/issues"});
                }.bind(this),
                10000
            );
        }
    };
</script>

到目前为止，该代码一直有效，在10秒钟后，发生了重定向到路线的问题。在10秒钟后加载路线问题后，它将从代码示例导航回到页面活动页面。

似乎还有间隔设置。因为现在在9.x秒后就会发生重定向，并且重定向的速度越来越快，因此重定向次数越来越多，直到浏览器崩溃为止。

那么，是否有最佳实践来做一些事情，例如从router.js获取所有路由，然后在10秒后导航到下一页？

感谢您的帮助。

Answer 1

有两件事。如果您想使用setInterval，请使用clearInterval清除间隔。使用beforeDestroy钩子可以做到这一点。

或更妙的是，使用setTimeout代替setInterval。使用setTimeout，您无需清理计时器。这是推荐的方法。

Vue在10秒后导航到下一条路线

1 个答案: