vue router路由参数变化,路由地址没变化 ,页面不重新渲染,刷新问题
路由参数变化,地址没变化 ,页面不重新渲染,刷新问题原因:该路由对应的组件在 路由地址没有改变,会复用该组件,不会再重新创建该组件实例,所以对应的写在生命周期钩子函数中的异步请求代码就不会执行,页面也不会重新渲染,解决方法:方法一:给对应的router-view 动态添加key属性,这样就不会出现路由参数变化页面复用的情况,代码如下:#router-view 代码<router-view :
·
路由参数变化,地址没变化 ,页面不重新渲染,刷新问题
原因:
该路由对应的组件在 路由地址没有改变,会复用该组件,不会再重新创建该组件实例,所以对应的写在生命周期钩子函数中的异步请求代码就不会执行,页面也不会重新渲染,
解决方法:
方法一:
给对应的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 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
#再次调用第三部封装好的函数即可
},
再次调用第三部封装好的函数即可
更多推荐
已为社区贡献4条内容
所有评论(0)