Vue+Vue-router如何实现同名路由切换数据不更新功能-创新互联

这篇文章将为大家详细讲解有关Vue + Vue-router如何实现同名路由切换数据不更新功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司-成都网站建设公司,专注成都网站建设、成都做网站、网站营销推广,域名注册虚拟主机绵阳服务器托管有关企业网站制作方案、改版、费用等问题,请联系成都创新互联公司

在默认情况下, 同名路由之间的切换, 由于组件可以服用, 放在ready里获取数据, 是不会执行的, 有两种方法可以解决

注意: 该问题仅存在于 vue1

方法1: 将数据获取放到route.data下~

route: {
  data({to: {params: { page }}}) {
    return Promise.all([
      this.getApi()
    ]).then(() => {

    })
  }
}

方法2: 设置route.canReuse = false, 强制组件不复用~

route: {
  canReuse() {
    return false
  }
},
ready() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
  });
}

关于“Vue + Vue-router如何实现同名路由切换数据不更新功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享标题:Vue+Vue-router如何实现同名路由切换数据不更新功能-创新互联
网站URL:http://scjbc.cn/article/ehepi.html

其他资讯