Fatal编程技术网
  • laravel/
  • Laravel 拉威尔+；vue<；路由器链路>；不'；不要改变内容

Laravel 拉威尔+；vue<；路由器链路>；不'；不要改变内容

laravel vue.js

Laravel 拉威尔+；vue<；路由器链路>；不'；不要改变内容,laravel,vue.js,Laravel,Vue.js,我有一个使用laravel+vue的项目，我在主页上列出了所有文章，当用户单击特定文章时，会打开一个页面并显示该文章，其中最突出的文章出现在旁边，如下所示： 主页代码为： <template> <div class="container-fluid"> <div class="row"> <div class=" col-lg-3 d-none

我有一个使用laravel+vue的项目，我在主页上列出了所有文章，当用户单击特定文章时，会打开一个页面并显示该文章，其中最突出的文章出现在旁边，如下所示：

主页代码为：

    <template>
    <div class="container-fluid">
        <div class="row">


            <div class=" col-lg-3 d-none d-lg-block top-article">
                <top-articles />
            </div>


            <div class="col-12 col-lg-2">
                <new-articles />
            </div>


            <div class="col-lg-2 d-none d-lg-block OurStories2">
                 <div v-for="article in articles" :key="article.id"  class="hieght">
                <router-link :to="{ name: 'SinglePost', params: { id: article.id } }">
                <div class="NewArticle">
                    <img :src="'/images/1617619359.jpg'" class="img-fluid newarticles-img">
                    <h6 class="NewArticleTitle">{{ article.title.ar }}</h6>
                </div>
                </router-link>
                <div>
                <p class="NewArticleBody">{{ article.excerpt.ar + ' Read more' }}</p>
                </div>
              </div>
            </div>


            <div class="col-lg-2 d-none d-lg-block">
                <our-stories />
            </div>



        </div>
    </div>
</template>

<script>
import NewArticles from './NewArticles.vue';
import OurStories from './OurStories.vue';
import TopArticles from './TopArticles';
    export default {
        components:{
                TopArticles,
                OurStories,
                NewArticles
        },
        data() {
            return {
                articles: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/articles/')
                .then(response => {
                    this.articles = response.data;
                });
        },
        methods: {
            deleteProduct(id) {
                this.axios
                    .delete(`http://localhost:8000/api/articles/${id}`)
                    .then(response => {
                        let i = this.articles.map(data => data.id).indexOf(id);
                        this.articles.splice(i, 1)
                    });
            }
        }
    }
</script>

    <template>
    <div>
        <go-back />
         <div class="container">
             <div class="row">
                 <div class="col-lg-6 col-12">
                     <!-- <img :src="'/images/articles/'+ articles.image" class="img-fluid img"> -->
                     <img :src="'/images/articles/1617007463.jpg'" class="img-fluid img">
                     <p>{{articles.body.en}}</p>
                 </div>
                  <div class="col-lg-3 d-none d-lg-block">
                       <top-articles />
                     {{articlesId}}
                 </div>
                     <div class="col-lg-3 our-stories d-none d-lg-block">
                     <our-stories />
                 </div>
             </div>

               <div>
         <router-view :key="$route.path"> </router-view>
              </div>
         </div>


            {{articlesId}}

    </div>
</template>

<script>
import GoBack from '../GoBack';
import OurStories from '../OurStories.vue';
import TopArticles from '../TopArticles.vue';
export default {
    components:{
        GoBack,
        TopArticles,
        OurStories
    },
    data(){
        return{
          articles: "",
          articlesId:this.$route.params.id,
          image:"https://via.placeholder.com/1520x400"
        }
    },

    props: {
        id: {
        type:Number,
        required: true
    },
    },

     created() {
             this.axios
                .get('http://localhost:8000/api/articles/')
                .then(response => {
                  this.articles =  response.data.find(  response  => response.id === parseInt(this.id)); //id parameter type, your items has id as number type but router return string and we use strict comparison in Product component.so Use parseInt(this.$route.params.id)
                  console.log(this.articlesId);
                });

    }
}
</script>


{{article.title.ar}}

{{article.extracpt.ar+'readmore'}

从“./NewArticles.vue”导入新文章；
从“/OurStories.vue”导入我们的故事；
从“/”导入主题文章；
导出默认值{
组成部分：{
主题文章，
我们的故事，
新文章
},
数据（）{
返回{
条款：[]
}
},
创建（）{
这是axios
.get（'http://localhost:8000/api/articles/')
。然后（响应=>{
this.articles=response.data；
});
},
方法：{
删除产品（id）{
这是axios
.删除(`http://localhost:8000/api/articles/${id}`）
。然后（响应=>{
设i=this.articles.map（data=>data.id）.indexOf（id）；
本.条款.拼接（i，1）
});
}
}
}
在帖子页面：

张贴页面代码为：

    <template>
    <div class="container-fluid">
        <div class="row">


            <div class=" col-lg-3 d-none d-lg-block top-article">
                <top-articles />
            </div>


            <div class="col-12 col-lg-2">
                <new-articles />
            </div>


            <div class="col-lg-2 d-none d-lg-block OurStories2">
                 <div v-for="article in articles" :key="article.id"  class="hieght">
                <router-link :to="{ name: 'SinglePost', params: { id: article.id } }">
                <div class="NewArticle">
                    <img :src="'/images/1617619359.jpg'" class="img-fluid newarticles-img">
                    <h6 class="NewArticleTitle">{{ article.title.ar }}</h6>
                </div>
                </router-link>
                <div>
                <p class="NewArticleBody">{{ article.excerpt.ar + ' Read more' }}</p>
                </div>
              </div>
            </div>


            <div class="col-lg-2 d-none d-lg-block">
                <our-stories />
            </div>



        </div>
    </div>
</template>

<script>
import NewArticles from './NewArticles.vue';
import OurStories from './OurStories.vue';
import TopArticles from './TopArticles';
    export default {
        components:{
                TopArticles,
                OurStories,
                NewArticles
        },
        data() {
            return {
                articles: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/articles/')
                .then(response => {
                    this.articles = response.data;
                });
        },
        methods: {
            deleteProduct(id) {
                this.axios
                    .delete(`http://localhost:8000/api/articles/${id}`)
                    .then(response => {
                        let i = this.articles.map(data => data.id).indexOf(id);
                        this.articles.splice(i, 1)
                    });
            }
        }
    }
</script>

    <template>
    <div>
        <go-back />
         <div class="container">
             <div class="row">
                 <div class="col-lg-6 col-12">
                     <!-- <img :src="'/images/articles/'+ articles.image" class="img-fluid img"> -->
                     <img :src="'/images/articles/1617007463.jpg'" class="img-fluid img">
                     <p>{{articles.body.en}}</p>
                 </div>
                  <div class="col-lg-3 d-none d-lg-block">
                       <top-articles />
                     {{articlesId}}
                 </div>
                     <div class="col-lg-3 our-stories d-none d-lg-block">
                     <our-stories />
                 </div>
             </div>

               <div>
         <router-view :key="$route.path"> </router-view>
              </div>
         </div>


            {{articlesId}}

    </div>
</template>

<script>
import GoBack from '../GoBack';
import OurStories from '../OurStories.vue';
import TopArticles from '../TopArticles.vue';
export default {
    components:{
        GoBack,
        TopArticles,
        OurStories
    },
    data(){
        return{
          articles: "",
          articlesId:this.$route.params.id,
          image:"https://via.placeholder.com/1520x400"
        }
    },

    props: {
        id: {
        type:Number,
        required: true
    },
    },

     created() {
             this.axios
                .get('http://localhost:8000/api/articles/')
                .then(response => {
                  this.articles =  response.data.find(  response  => response.id === parseInt(this.id)); //id parameter type, your items has id as number type but router return string and we use strict comparison in Product component.so Use parseInt(this.$route.params.id)
                  console.log(this.articlesId);
                });

    }
}
</script>


{{articles.body.en}

{{articlesId}}
{{articlesId}}
从“../GoBack”导入GoBack；
从“../OurStories.vue”导入我们的故事；
从“../TopArticles.vue”导入TopArticles；
导出默认值{
组成部分：{
戈巴克，
主题文章，
我们的故事
},
数据（）{
返回{
文章：“，
articlesId:this.$route.params.id，
图像：“https://via.placeholder.com/1520x400"
}
},
道具：{
身份证：{
类型：数字，
必填项：true
},
},
创建（）{
这是axios
.get（'http://localhost:8000/api/articles/')
。然后（响应=>{
this.articles=response.data.find（response=>response.id===parseInt（this.id））；//id参数类型，您的项目的id为数字类型，但路由器返回字符串，并且我们在产品组件中使用严格的比较。因此使用parseInt（this.$route.params.id）
console.log（this.articlesId）；
});
}
}
  • 问题是：当用户单击主页上的一篇文章时，它会打开并显示在页面上，顶部的文章会出现在您的旁边。到目前为止，一切都很好，但当用户单击文章一侧的一篇文章时，什么也没有发生（只有url中的id更改为文章的新id），但内容仍然是前一篇文章，我希望每当用户单击文章一侧的文章时，内容都会更改
      • 您需要将
      axios
      请求移动到一个方法中，并在
      创建的
      钩子中调用它。然后使用
      watch
      响应路由更改，并在
      watch
      内再次调用
      axios
      请求
      

      <script>
import GoBack from '../GoBack';
import OurStories from '../OurStories.vue';
import TopArticles from '../TopArticles.vue';
export default {
    components:{
        GoBack,
        TopArticles,
        OurStories
    },
    data(){
        return{
            articles: "",
            articlesId:this.$route.params.id,
            image:"https://via.placeholder.com/1520x400"
        }
    },

    props: {
        id: {
            type:Number,
            required: true
        },
    },

    created() {
        this.getArticles();

    },
    methods: {
        getArticles() {
            this.axios
                .get('http://localhost:8000/api/articles/')
                .then(response => {
                    this.articles = response.data.find(response => response.id === parseInt(this.id)); //id parameter type, your items has id as number type but router return string and we use strict comparison in Product component.so Use parseInt(this.$route.params.id)
                    console.log(this.articlesId);
                });
        },
    },
    watch: {
        $route(to, from) {
            // react to route changes...
            this.articlesId = this.$route.params.id
            this.getArticles();
        }
    },
}
</script>

      

      
从“../GoBack”导入GoBack；
从“../OurStories.vue”导入我们的故事；
从“../TopArticles.vue”导入TopArticles；
导出默认值{
组成部分：{
戈巴克，
主题文章，
我们的故事
},
数据（）{
返回{
文章：“，
articlesId:this.$route.params.id，
图像：“https://via.placeholder.com/1520x400"
}
},
道具：{
身份证：{
类型：数字，
必填项：true
},
},
创建（）{
这个.getArticles（）；
},
方法：{
getArticles（）{
这是axios
.get（'http://localhost:8000/api/articles/')
。然后（响应=>{
this.articles=response.data.find（response=>response.id===parseInt（this.id））；//id参数类型，您的项目的id为数字类型，但路由器返回字符串，并且我们在产品组件中使用严格的比较。因此使用parseInt（this.$route.params.id）
console.log（this.articlesId）；
});
},
},
观察：{
$route（到、从）{
//对路线更改作出反应。。。
this.articlesId=this.$route.params.id
这个.getArticles（）；
}
},
}