vue 前进刷新后退不刷新

这边是router-view部门的写法：

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

下面是router中的写法，想法是匹配name末尾是指定字符的页面（再次以结尾为Add的页面为例），最初的写法是这样的：

const KEEPALIVE_NAME = 'Add'
if (to.name.indexOf(KEEPALIVE_NAME) !== -1) {
  // console.log('前进。。。')
  from.meta.keepAlive = true
  to.meta.keepAlive = false
}
if (from.name && from.name.indexOf(KEEPALIVE_NAME) !== -1) {
  // console.log('后退。。。')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
}

后面想了下这样的写法不够严谨，于是修改为用正则匹配的方式：

const VERIFY_NAME = /^\b\S*?Add\b$/
if (VERIFY_NAME.test(to.name)) {
  console.log('前进。。。')
  from.meta.keepAlive = true
  to.meta.keepAlive = false
}
if (VERIFY_NAME.test(from.name)) {
  console.log('后退。。。')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
}

下面是效果图：

 

 

 

转载于:https://www.cnblogs.com/ToBeBest/p/9686200.html