时间戳

首页 > 解决方案 > Laravel router-link 仅在第一次工作

laravel - Laravel router-link 仅在第一次工作

问题描述

我正在尝试从 News.vue 中的数据库中获取结果，并将它们显示在 Topnews.vue 中。我获取了两个链接。当我单击链接 1 时，它会显示 Topnews.vue 模板，一切都按预期工作，但是，如果我单击链接 2，除了 URL 更改之外，什么都没有发生，但模板没有显示结果。如果我刷新页面并单击链接 2 或单击导航栏，然后单击链接 2，它会显示出来，同样，单击链接 1 会更改 URL，但不显示。我真的坚持这一点，如果你在这个问题上帮助我，我会很高兴。希望你能理解。

新闻.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>

热门新闻.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>

标签： laravelvue.js

解决方案

如果您单击指向您所在页面的链接，则不会发生任何变化。Vue Router 足够聪明，不会进行任何更改。

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

推荐阅读