VUE 返回上一页 不刷新页面

应用场景：

　　当前我有一个列表页一个详情页，我希望我进入详情页以后再返回列表页时，列表页仍然能保留我进入详情页前的样子

解决方法：

1、我们需要在router设置中添加keep-alive属性

{
            isShow: true,
            permissionCode:"Meeting_Approve",
            icon: "",
            title: "会议审批",
            path: 'approvalManOfMeetings',
            name: 'approvalManOfMeetings',
            meta: {
                keepAlive: true    //true为需要缓存，false为不需要缓存（不需要的也可以不加）
            },
            component: () => import('./approvalManOfMeetings.vue')
        },

2、 在App.vue中为不需要刷新的路由添加keep-alive组件，最后修改成如下模样：

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

3、当我们需要从详情页返回到列表页的时候，详情页中只有使用this.$router.back()进行返回，我们想要的返回后列表页不刷新的效果才能生效

注：我在使用过程中注意到，当我不小心把详情页的路由配置页也加上了 keepAlive: true 以后，返回列表页后仍然被刷新了。暂时还没深究其中的问题，但是如果遇到相同问题的小伙伴可以试着查一下是不是因为这个原因导致返回后缓存失效页面被刷新。

 

 

在使用过程中我发现一个问题，就是部分页面在点击左侧菜单栏时会导致整个页面大刷新，给人的感觉就不是很好嘛，页面之间的过渡不是很流畅，最后发现是由于keep-alive导致的，最后研究了一下发现原来keep-alive还有另一种写法。

由于我当前的项目用的是多重嵌套，所以在嵌套超过两层以后，就需要在每一层的router-view标签外再套一层keep-alive标签，否则会造成keepAlive失效。

因此除了在App.vue的页面上加keep-alive以外，其他使用router-view标签的地方也需要套keep-alive标签，修改如下

App.vue页面：

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <keep-alive include="keepAlive">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<style scoped>
@import url("./assets/app.css");
</style>

嵌套页面：

<template>
  <div id="notManagement-div">
    <!-- <router-view></router-view> -->
    <keep-alive include="keepAlive">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

Props

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

具体说明可参考官网： https://cn.vuejs.org/v2/api/#keep-alive

 

由于我前面定义的需要缓存的组件名字为 keepAlive ，所以我只需要把需要缓存的vue页面的name值改为keepAlive就好，这个时候就不需要像上面那个方法一样还要去router里面设置当前页面的keepAlive属性了。