vue router路由参数变化,路由地址没变化 ,页面不重新渲染,刷新问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
路由参数变化,地址没变化 ,页面不重新渲染,刷新问题
原因:
该路由对应的组件在 路由地址没有改变,会复用该组件,不会再重新创建该组件实例,所以对应的写在生命周期钩子函数中的异步请求代码就不会执行,页面也不会重新渲染,
解决方法:
方法一:
给对应的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 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)