vue 前端进行tab页面切换时，要求不刷新

项目中TagsView组件用于tab页面切换，在项目中已使用keep-alive，目标页面也开启了“缓存”标志，但是在tab标签点击切换时，有几个页面数据还是刷新了。查找了相关资料，最终找到了一个【页签缓存】的资料，原来主要的问题就出在 “path” 和 “name” 没有完全匹配。

【页签缓存】
由于目前 keep-alive 和 router-view 是强耦合的，而且查看文档和源码不难发现 keep-alive 的 include (opens new window)默认是优先匹配组件的 name ，所以在编写路由 router 和路由对应的 view component 的时候一定要确保两者的 name 是完全一致的。(切记 name 命名时候尽量保证唯一性切记不要和某些组件的命名重复了，不然会递归引用最后内存溢出等问题)

//router 路由声明
{path: 'config',component: ()=>import('@/views/system/config/index'),name: 'Config',meta: { title: '参数设置', icon: 'edit' }
}

//路由对应的view  system/config/index
export default {name: 'Config'
}

一定要保证两着的名字相同，切记写重或者写错。默认如果不写 name 就不会被缓存

vue 前端进行tab页面切换时，要求不刷新相关推荐

html中tab页怎么写,html如何实现tab页面切换
html实现tab页面切换的方法:首先创建一个类名为wrap的div当作容器:然后创建四个label标签,在每一个label中创建一个span标签:最后创建一个div作为这个导航项. 本教程操作环境: ...
html两个tab页面,html如何实现tab页面切换
html实现tab页面切换的方法:首先创建一个类名为wrap的div当作容器:然后创建四个label标签,在每一个label中创建一个span标签:最后创建一个div作为这个导航项. 本教程操作环境: ...
关于tab栏切换时数据接口的调用
关于tab栏切换时数据接口的调用 <template><view class="container"><view class="tabBox ...
解决echart在tab中切换时显示不正确
在VUE使用Element UI时,在el-tab-pane添加上lazy='true'属性即可 <el-tab-pane label="远程测试控制" name=" ...
vue 组件监听页面切换_vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...
html的tab页面切换刷新,切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
前端js——tab选项卡切换模板、例子（点击标签显示对应内容）
效果 1.页面布局分别设置五个标签,给五个标签写序号,移到标签上获取标签序号显示对应的div 1)设置一个整个的div包含所有的标签和所有内容 2)标签 <ul><li style ...
js 解决页面切换时，定时器setInterval 会变得越来越慢
在项目中经常会用到自定义动画或者自定义一些无缝滚动什么的,需要用到js中的定时器setinterval,但是,楼主发现在项目中测试的时候,切换页面或者浏览器上面的页签时,定时器明明没有收到干扰,但是页 ...

vue 前端进行tab页面切换时，要求不刷新

vue 前端进行tab页面切换时，要求不刷新相关推荐

最新文章

热门文章