vue-router同一个页面地址栏参数改变，页面不刷新的问题

官网:带参数的动态路由匹配 | Vue Router

响应路由参数的变化

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航：

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
    this.userData = await fetchUser(to.params.id)
  },
}

监听路由变化,重新调用接口 

watch: {
      '$route' (to, from) {
        this.init()
      }
    },

最后

以上就是拉长西装为你收集整理的vue-router同一个页面地址栏参数改变，页面不刷新的问题的全部内容，希望文章能够帮你解决vue-router同一个页面地址栏参数改变，页面不刷新的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。