Question

我正在尝试从News.vue中的数据库中获取结果，并将它们显示在Topnews.vue中。我有两个链接。当我单击link1时，它会显示Topnews.vue模板，其中一切都按预期工作，但是，如果我单击link2，则没有任何反应，除了URL更改，但模板不显示结果。如果我刷新页面并单击link2或单击导航栏，然后单击link2，它会显示，同样，单击然后单击link1，更改URL，但不会显示。我真的很坚持，如果你帮我解决这个问题，我会很高兴。希望你明白。

News.vue

<template id="news">
        <div class="col-sm-5">
        <div class="cars" v-for="row in filteredNews" >
        <div class="name" >
            <p class="desc_top_time">{{row.created_at}}</p>
                <span class="last_p"> {{row.category}}</span>
            <h3 style="margin-bottom:-4px; font-size: 16px;">
    <router-link class="btn btn-primary" v-bind:to="{name: 'Topnews', params: {id: row.id}  }">{{row.title}}</router-link></h3>
        </div></div></div>
</template>


<script>
export default {
    data: function() {
        return {
            news: [],
        }
    },
    created: function() {
        let uri = '/news';
        Axios.get(uri).then((response) => {
            this.news = response.data;
        });
    },
    computed: {
        filteredNews: function() {
            if (this.news.length) {
                return this.news;
            }
        }
    }
}
</script>

Topnews.vue

<template id="topnews1">
<div class="col-sm-7">
<div class="cars">
<img :src="topnews.thumb" class="img-responsive" width=100%/>
<div class="name" ><h3>{{ topnews.title }}</h3>
<p> 
<br>{{ topnews.info }}<br/>
</p>
</div></div></div>
</template>

<script>
export default {
        data:function(){
               return {topnews: {title: '', thumb: '', info: ''}}
        },
        created:function()  {
            let uri = '/news/'+this.$route.params.id;
            Axios.get(uri).then((response) => {
                this.topnews = response.data;
            });
        }
    }
</script>

Answer 1

如果您点击指向您所在页面的链接，则不会发生任何变化。 Vue Router非常智能，无法进行任何更改。

我的猜测是ID搞砸了。如果您使用Vue devtools，您将能够轻松查看每个链接中的数据。它们是你所期望的吗？

Answer 2

与GoogleMac一样，Vue会尽可能重复使用相同的组件。由于两个ID的路由使用相同的组件，因此Vue不会重新创建它，因此仅在第一页上调用created()方法。您需要使用路由器beforeRouteUpdate来捕获路由更改并更新数据。

TopNews.vue中的

：

export default {
        data:function(){
               return {topnews: {title: '', thumb: '', info: ''}}
        },
        beforeRouteEnter:function(to, from, next)  {
            let uri = '/news/'+ to.params.id;

            Axios.get(uri).then((response) => {
                next(vm => {
                    vm.setData(response.data)
                })
            });
        },
        beforeRouteUpdate: function(to, from, next) {
            let uri = '/news/'+ to.params.id;
            Axios.get(uri).then((response) => {
                this.setData(response.data);
                next();
            });

        },
        methods: {
            setData(data) {
                this.topnews = data
            }
        }
    }

Laravel router-link仅在第一次使用

2 个答案: