资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vuemenu不刷新如何解决

今天小编给大家分享一下vue menu不刷新如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

目前创新互联已为千余家的企业提供了网站建设、域名、网络空间、网站托管维护、企业网站设计、马边彝族网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

vue menu不刷新的解决办法:1、在index页面编写“”;2、将缓存name设置为“test-keep-alive”;3、在router文件配置“{path: '/Material',name: 'Material'...}”即可。

vue 实现组件切换tab(菜单)页不刷新页面

vue 实现组件切换tab(菜单)页不刷新页面(keep alive)

是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

官网解释

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染。

应用场景

比如在做有切换组件的功能的系统时,一般都是在index页面里放置标签,再加上router文件配置的父子组件关系以及路由跳转,实现组件渲染页面。但是这样的效果是每点击一次组件,就会重新渲染一次也面,页面上的数据就不会被保留下来。因此,使用标签包裹着标签就可以实现把不活动的组件缓存下来,返回后仍有原来的信息 。

具体代码

在index页面编写如下代码

// 需要缓存的组件

    

// 不需要缓存的组件

缓存组件name为test-keep-alive的组件 ,这里的include为缓存,exclude为不缓存

// 将缓存name为test-keep-alive的组件

  

// 将缓存name为teat,teat2的组件

  

在router文件配置如下代码

// 需要缓存的组件
{
    path: '/Material',
    name: 'Material',
    aliasName: '物料信息',
    meta:{keepAlive: true}, // 是否缓存组件
    component: () => import('../components/Material/index.vue'),
},
{
    path: '/Unit',
    name: 'Unit',
    aliasName: '单位信息',
    component: () => import('../components/Unit/index.vue'),
}

以上就是“vue menu不刷新如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


当前标题:vuemenu不刷新如何解决
标题链接:http://www.cdkjz.cn/article/iiigcc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220