Laravel router-link работает только в первый раз

Question

Я пытаюсь получить результаты из базы данных в News.vue и отобразить их в Topnews.vue.У меня две ссылки получены.Когда я нажимаю ссылку1, он показывает шаблон Topnews.vue, где все работает, как задумано, однако, если я нажимаю ссылку2, ничего не происходит, за исключением того, что URL-адрес изменяется, но шаблон не показывает результат.Если я обновляю страницу и нажимаю ссылку2 или нажимаю на панель навигации, то появляется ссылка2, и то же самое, нажимая затем ссылку1, изменяет 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

Как сказал GoogleMac, Vue будет по возможности использовать один и тот же компонент.Поскольку маршрут для обоих идентификаторов использует один и тот же компонент, 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
            }
        }
    }

Answer 2

Если вы нажмете ссылку, ссылающуюся на страницу, на которой вы находитесь, ничего не изменится.Vue Router достаточно умен, чтобы не вносить никаких изменений.

Я предполагаю, что идентификаторы испорчены.Если вы используете Vue devtools, вы сможете легко увидеть, какие данные есть в каждой ссылке.Являются ли они, как вы ожидаете.