zoukankan      html  css  js  c++  java
  • 前进刷新后退不刷新

    1.当从详情页退回列表页的时候,有时候不希望列表页刷新

    // newsList 是list.vue内name属性
    <keep-alive include="newsList"> <router-view/> </keep-alive>

    2.有时候详情页有增删改查的需求,当我们返回列表页的时候,如果修改你了数据,还是需要重新刷新下数据

    // 方案一
    <keep-alive>
        <router-view :key="$route.fullPath"/>
    </keep-alive>
    
    // 详情页退回时使用
    this.$router.push({
        path: '/list',
        query: { 'randomID': 'id' + Math.random() },
    })
    
    
    // 方案二
    {
          path: '/detail',
          name: 'detail',
          component: () => import('../view/detail.vue'),
          meta: {isRefresh: true}
     },
    
    // App.vue 
    // 当我们在详情页中删除了对应的列表项时,就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页,页面会重新刷新 
    watch: {
           $route(to, from) {
               const fname = from.name
               const tname = to.name
               if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
                   from.meta.isRefresh = false
           // 在这里重新请求数据
               }
           }
       },
  • 相关阅读:
    Windows下的免安装版MySQL配置
    spket插件安装并设置JQuery自动提示
    js生成条形码——JsBarcode
    金明的预算方案
    文化之旅
    方格取数
    天使的起誓
    最大差值
    A%B Problem
    取数游戏
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/14137592.html
Copyright © 2011-2022 走看看