vue跳转页面返回后不让刷新

488 阅读1分钟

//页面中添加,路径配置即将要跳转的页面

`beforeRouteEnter(to, from, next) {

// just use this //需要跳转至历史数据页,返回时本页面不刷新

//动态修改mate里面得keepAlive,除历史数据页外,跳到其他页面还是要刷新得

if (from.path == '/analysHistory') {

to.meta.keepAlive = true 

} else {

to.meta.keepAlive = false 

} next()

},`

//跳转的路由中存贮

`{

path: '/analysDevice',

name: 'analysDevice',

component: analysDevice, 

meta: { keepAlive: true } 


//需要缓存,但是这个值可以在页面中调用beforeRouteEnter进行修改

}, {

path: '/analysDevice',

name: 'analysDevice',

component: analysDevice, 

meta: {} //不需要缓存处理

},`

//APP.vue中添加

`<div id="app">

//keep-alive:主要用于保存组件状态,避免重新渲染,mate中储存keepAlive为true时,加上此组件

      

        <router-view v-if="$route.meta.keepAlive">

      

      <router-view v-if="!$route.meta.keepAlive">

    `

`keep-alive: 主要用于保存组件状态,避免重新渲染 keep-alive: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

keep-alive属性:

include - 字符串或正则表达式。只有名称匹配的组件会被缓存

 <keep-alive include='test'> //组件名为test的会被缓存      <router-view/>  </keep-alive>  <keep-alive include='as,zx'> //组件名为as或者zx的会被缓存      <router-view/>  </keep-alive>

exclude - 字符串或正则表达式。除了名称匹配的组件不会被缓存,其他组件都会被缓存

<keep-alive exclude='test'> //组件名为test的‘不’会被缓存      <router-view/>  </keep-alive>

max - 数字。最多可以缓存多少组件实例 组件里如果数量超过max。那么则使用会把最久没有被访问过的组件移出缓存队列注销掉。而所用的底层机制就是利用 LRU算法 方式

LUR缓存淘汰法 根据历史的数据来淘汰数据。重点:保护最近被访问过的组件,淘汰最久没有访问的。主要思想,如果数据最近没有访问过,那么他后面被访问的几率不会打

<keep-alive :include="test" :max="10"> <component>only one</component> </keep-alive>