[JavaScript知识库]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) { } }

会调用两次不推荐