VUE 返回上一页 不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由,前进刷新,返回不刷新

本文探讨了在Vue中如何实现每次前进到新页面时刷新,而返回上一页时不刷新页面的问题。通过结合keep-alive和vue-router,可以控制特定页面的缓存行为。提供了一个代码示例,并引用了相关详细教程链接。
摘要由CSDN通过智能技术生成

每次进入页面时都执行created、前进刷新,返回不刷新

思路:

利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新;

keepAlive: true // 不需要每次进入刷新

代码:
app.vue

<div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <m-header
      v-if="header_show"
      :menush="menush"
      :headertop="headertop_top"
      :iflogo="iflogo"
      :ifnavtit="ifnavtit"
      :navtit="navtit"
    />

    <!-- <router-view @header="header"
                 @footer="footer"
                 @headertop="headertop"
                 @menushow="menushow"
                 @mlogo="mlogo"
                 @mnavtit="mnavtit"
                 @navtxt="navtxt"
                 :key="$route.fullPath" /> -->
    <keep-alive>
      <router-view
        data-id="1"
        v-if="$route.meta.keepAlive"
        @header="header"
        @footer="footer"
        @headertop="headertop"
        @menushow="menushow"
        @mlogo="mlogo"
        @mnavtit="mnavtit"
        @navtxt="navtxt"
        :key="$route.fullPath"
      ></router-view>
    </keep-alive>
    <router-view
      data-id="2"
      v-if="!$route.meta.keepAlive"
      @header="header"
      @footer="footer"
      @headertop="headertop"
      @menushow="menushow"
      @mlogo="mlogo"
      @mnavtit="mnavtit"
      @navtxt="navtxt"
      :key="$route.fullPath"
    ></router-view>

    <m-footer v-if="footer_show" />
  </div>

router.js

import Vue from "vue";
import Router from "vue-router";
import dingwei from "@/views/dingwei.vue";
import mIndex from 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值