今天在遇见一个vue的页面缓存方面的问题,在界面相同功能不同时一般我们采用的都是直接复用界面,修改路由即可。百试不爽的方法,但是这次出现两个路由复用同一个界面相互跳转时界面数据被保留,没有刷新还是之前的页面对象。
出现问题的原因
在路由文件的那里。一般多级路由我们会创建一个空白界面作为父级。
const page = { name:"test", render: (h) => h('router-view') }
{
path: 'test',
component: page , //承载子界面的父级界面
children: [ ] // 子界面
}
这里正常情况下不会出现问题,但是如果其他同级路由块的不同路由都是复用同一个界面时就会导致界面被缓存,首先父级都是page界面,其次子界面是相同的,这样就会导致界面会缓存。这里我猜测缓存的原因有两种,一是路由本身机制认为跳转的是同一个界面,二是跳转路由时获取新的页面对象,都是页面对象没有发生改变,所以直接返回了已经创建的页面对象。
这里我没有去深入测试,感兴趣的朋友可以试试。
解决方法
既然问题找到了那我们只需要让我们上面说的两种情况识别时认为是两个不同界面就不会使用原界面。
{
path: 'test',
component: { name:"test", render: (h) => h('router-view') } , //承载子界面的父级界面
children: [ ] // 子界面
}
这样就解决了,这个原理很简单,就不解释了