Vue页面跳转,从A页面跳转到B页面,再从B页面跳转到A页面

Question

问题描述

A页面有input框，输入了之后，然后点击查询按钮，展现的查询结果为一个echart图表折线图，此时浏览器地址为/a，在echart图表上有点击事件，点击后跳转到B页面,浏览器地址为/a/b。现在点击浏览器后退的箭头，要回到/a页面，并且要让A页面的图表折线图还存在。

问题出现的环境背景及自己尝试过哪些方法

在router.js中A页面的路由设置了meta的keepAlive为true

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
//A页面router.js中的
{ path: '/a', component: A, name: 'A', meta: { keepAlive: true } },
// A.vue页面的
<template>
<keep-alive>

  <div ...></div>

</keep-alive>
</template>

//B页面在methods之后，
beforeRouteLeave (to, from, next) {

to.meta.keepAlive = true
next()

},

你期待的结果是什么？实际看到的错误信息又是什么？

从B页面回到A页面时候，A页面的echart表还存在

Answer 1

 <keep-alive v-if="route.meta.isAlive">
  <router-view></router-view>
</keep-alive>

Answer 2

可以看看keepAlive的include、exclude属性，比用v-if判断是否缓存灵活许多。。
在vuex里加一个include数组，keepAlive的include属性绑定此数组，A页面的beforeRouteLeave里判断to的页面，如果to.path指向的是B页面的path，include数组里添加B页面组件的name，如果不是，include数组去掉B页面组件的name