vue element 页面切换如何无刷新

使用keep-alive就行了

如果所有页面都保持页面缓存就直接在app.vue中设置中加上keep-alive就行了

在app.vue中设置

<div id="app">
        <!-- 所有页面都保持页面缓存 -->
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
</div>

如果需要根据配置来，可以先在路由配置上设置是否缓存在根据判断来

先在路由配置上设置是否缓存,isKeepAlive用来判断是否缓存

{
    path: '/task_manage/index',
    name: 'task_manage',
    component: () => import('/@/views/task_manage/index.vue'),
    meta: {
        title: '任务管理',
        isLink: '',
        isHide: false,
        // isKeepAlive用来判断是否缓存
        isKeepAlive: true,
        isAffix: false,
        isIframe: false,
        roles: ['admin', 'common'],
        icon: 'iconfont icon-shouye',
    },
},

然后在app.vue中设置是否使用keep-alive就行了

<keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.isKeepAlive"></router-view>

还可以使用include与exclude等属性设置是否需要缓存

include 值为字符串或者正则表达式，匹配的组件会被缓存。
exclude 值为字符串或正则表达式，匹配的组件不会被缓存。

使用keep-alive与不使用keep-alive生命周期函数介绍

不使用keep-alive
beforeRouteEnter —> created —> mounted —> destroyed；

使用keep-alive
beforeRouteEnter —> created —> mounted —> activated —> deactivated；
再次进入缓存的页面，只会触发beforeRouteEnter —>activated —> deactivated ，created和mounted不会再执行；

注意缓存中起作用需要加上名称name哟

而且这个需要和路由配置上的一致哦，乱写是不行的