【vue 刷新当前页面并且替换参数】

最新推荐文章于 2024-03-28 17:52:38 发布

常安cc

最新推荐文章于 2024-03-28 17:52:38 发布

阅读量767

点赞数

分类专栏： vue 前端文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_55546349/article/details/131312544

版权

前端同时被 2 个专栏收录

92 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

文章介绍了在Vue应用中，如何在`app.vue`组件中设置`isRouterAlive`状态来实现页面刷新，并在特定页面(`新闻详情页`)通过`$router.replace`结合`reload`方法来替换参数并刷新页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 刷新当前页面并且替换参数

1.app.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view v-if="isRouterAlive"/> 
    <Footer></Footer>
    <GoTop></GoTop>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide (){
    return {
      reload: this.reload
    }
  },
  data(){
    return {
      isRouterAlive: true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
  }

}
</script>

<style>
</style>

2.当前需要刷新的页面

 inject: ["reload"],
  methods: {
    // toNewsDetail
    toNewsDetail(i, item) {
      var that = this;
      this.$router.replace(
        {
          name: "newsDetail",
          params: { id: item.id, type: item.type },
        },
        () => {
          that.reload(); //刷新页面
        }
      );
    },
   },