VUE this.$router.push跳转页面传值不同 created 函数只调用一次 页面不刷新解决办法

问题:

在vue中使用 this.$router.push() 方法,如果只是传入的参数不同,会出现 url
地址变化了,但是页面没有重新请求数据,生命周期函数未调用,需要刷新一下页面才有新的数据加载。

原因:

由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2
这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加
beforeRouteUpdate 钩子来执行相关方法拉去数据

解决方法:

1. beforeRouteUpdate 钩子函数


beforeRouteUpdate(){

//执行获取数据接口

}

2. 给router-view 绑定相应的key值

设置 router-view 的 key 属性值为 $route.path,或则为 $route.fullpath

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.fullPath
    }
  }
}
</script>

$route.path
  • 从 /page/1 => /page/2, 由于这两个路由的 $route.path 并不一样, 所以组件被强制不复
  • 从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.path 一样, 所以和没设置 key 属性一样,
    会复用组件
$route.fullPath
  • 从 /page/1 => /page/2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用
  • 从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用

3. 监听路由的变化

在页面的 watch 中,监听 $router 的变化

watch: { $route (to, from) { } }

会调用两次不推荐

上一篇:MySql主从复制出现问题


下一篇:企业数字化转型需秉持长期主义