路由参数变化,地址没变化 ,页面不重新渲染,刷新问题
原因:

该路由对应的组件在 路由地址没有改变,会复用该组件,不会再重新创建该组件实例,所以对应的写在生命周期钩子函数中的异步请求代码就不会执行,页面也不会重新渲染,

解决方法:
方法一:

给对应的router-view 动态添加key属性,这样就不会出现路由参数变化页面复用的情况,代码如下:

#router-view 代码
<router-view :key="key"></router-view>
#组件动态key属性 的值
computed: {
    key() {
      return this.$route.name !== undefined
        ? this.$route.name + new Date()
        : this.$route + new Date();
    }
  }

注意: 设置了key属性后,跟随 这个router-view 下的所有 视图,路由跳转 都会重新创建

方法二:

通过watch方法监听 $route
把异步请求代码放到methods中, 创建组件时,在钩子函数中调用一次封装好的数
监听 $route 变化 (深度监听)后再次调用 封装好的函数,
这样就达到了数据改变重新渲染该组件的目的

watch: {
    $route: {
  		handler(to, from) {
  			#调用第三部封装好的函数即可
  		},
  		deep:true
  	}
}
方法三:

在该组件中设置一个守卫,会怎么属性监听选项的话,这个就非常简单了,
首先重复方法三的一二步,
在组件中配置钩子函数

#
name'',
data(){return{}},
methods: {},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变,但是该组件被复用时调用
  // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
  // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  #再次调用第三部封装好的函数即可
},

再次调用第三部封装好的函数即可

GitHub 加速计划 / vu / vue
207.54 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

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

更多推荐