不同路由复用相同界面导致页面不刷新问题

今天在遇见一个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: [ ]          // 子界面

}


这样就解决了,这个原理很简单,就不解释了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容