vue切换菜单时不需要页面刷新_Vue实现切换Tab(前进)刷新页面,经过其他动作,后退Tab(再次返回Tab)页面数据不刷新...
Vuejs框架相关内容。业务情景描述后台界面,在点击左侧边栏的菜单的时候,导航栏会出现Tab页面,就像是这样(我以阿里云后台的一个场景截图为示例):第一、我在云产品页面中,按照一定时间查询出来之后,会出现查询结果。第二、我点击万网产品订单,跳转到万网产品订单页面。第三、我返回云产品订单,此时我查询的结果会销毁,因为我点击云产品订单这个tab页面切换的时候,执行的试重新listQuery操作。类似地
Vuejs框架相关内容。
业务情景描述
后台界面,在点击左侧边栏的菜单的时候,导航栏会出现Tab页面,就像是这样(我以阿里云后台的一个场景截图为示例):
第一、我在云产品页面中,按照一定时间查询出来之后,会出现查询结果。
第二、我点击万网产品订单,跳转到万网产品订单页面。
第三、我返回云产品订单,此时我查询的结果会销毁,因为我点击云产品订单这个tab页面切换的时候,执行的试重新listQuery操作。
类似地:
我如果选择了部分条件,但是没有点击查询,此时没有查询结果,但是我执行上述曹组的二三步骤,返回的时候,一样,下拉列表没有保存他们的选择状态。
类似地,文本输入框也不会这样。
需要解决的问题
综合上述两个业务场景,当返回的时候,文本输入框的值不变、下来选择菜单不变、以及查询的结果不变。保持第一次查询或者操作的状态。而不是再次渲染。
临时解决方案:
在路由中添加meta: { keepAlive: true },劳动力比较大。暂时还没有其他的解决方案。
{
path: 'dashboardDemo',
component: _import('demo/dashboard/index'),
name: '仪表盘DEMO',
authority: 'dashboardDemo',
meta: { keepAlive: true }
}
更多推荐
所有评论(0)