Vue相同组件跳转不刷新,created只执行一次

vue页面跳转 想在created 或mounted中 使用初始化函数 不成功
eg: Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created,mounted 之类的钩子

  1. 需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行相关方法拉去数据。
  2. 设置 router-view 的 key 属性值为 $route.fullPath
<router-view :key='$route.fullPath'></router-view >
// 从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用。
// 相关钩子加载顺序为:beforeRouteUpdate => created => mounted

  1. 深度监听 r o u t e 的变化进行初始化操作当检测到 route的变化 进行初始化操作 当检测到 route的变化进行初始化操作当检测到route发生变化后执行handler()
  watch: {
    $route:{
      handler(n){
		// 初始化操作,这里边的操作可以把created钩子中的操作复制到这里一份。
      },
      immediate: true,
      deep: true,
    }
  },

原文链接:https://blog.csdn.net/Nooneandyou_/article/details/109841760

GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐