Vue + Vue-router 同名路由切换数据不更新的方法

 更新时间:2017年11月20日 17:18:33   作者:M.M.F  
本篇文章主要介绍了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 进阶教程之v-model详解

    Vue 进阶教程之v-model详解

    这篇文章主要介绍了Vue 进阶教程之v-model详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue使用babel-polyfill兼容IE解决白屏及语法报错问题

    Vue使用babel-polyfill兼容IE解决白屏及语法报错问题

    这篇文章主要介绍了Vue使用babel-polyfill兼容IE解决白屏及语法报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vuejs实现带样式的单文件组件新方法

    Vuejs实现带样式的单文件组件新方法

    这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • elementui之el-tebs浏览器卡死的问题和使用报错未注册问题

    elementui之el-tebs浏览器卡死的问题和使用报错未注册问题

    这篇文章主要介绍了elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
    2019-07-07
  • Vue专属状态管理库Pinia的使用与实践分享

    Vue专属状态管理库Pinia的使用与实践分享

    在 Vue 的开发中,状态管理是一个不可或缺的部分,尤其是在复杂的应用中,组件之间的状态共享和管理变得至关重要,Pinia 作为 Vue 的专属状态管理库,本文将深入介绍 Pinia 的基础知识、核心功能以及实际使用场景,需要的朋友可以参考下
    2024-11-11
  • Vue.js中安装一个路由器demo

    Vue.js中安装一个路由器demo

    这篇文章主要为大家介绍了Vue.js中安装一个路由器demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue中深度选择器图文详解

    vue中深度选择器图文详解

    在Vue的开发中,我们经常会用到外部组件库,下面这篇文章主要给大家介绍了关于vue中深度选择器的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 解决在Vue中使用axios POST请求变成OPTIONS的问题

    解决在Vue中使用axios POST请求变成OPTIONS的问题

    这篇文章主要介绍了解决在Vue中使用axios POST请求变成OPTIONS的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 一文带你了解Vue中单文件组件的使用

    一文带你了解Vue中单文件组件的使用

    在web开发中,组件化开发已成为一种趋势,Vue提供了一种高效的方式来创建和管理这些组件—单文件组件,下面我们就来看看它的具体应用吧
    2024-03-03
  • Vue3中vue-router的使用方法详解

    Vue3中vue-router的使用方法详解

    Vue Router 是 Vue 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,本文将通过简单的示例为大家介绍一下vue-router的使用,需要的可以参考一下
    2023-06-06

最新评论