Vue中给当前页面传递参数并重新加载,vue使用this.$router.push跳转页面,给跳转过去的页面传参不一致时重新加载
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue通过this.$router.push给url传参,改变url但是当前页面不会自动刷新
跳转页面代码
this.$router.push({
name: 'allbusiness',
query: {
pw_id: item.id
}
});
1.使用 watch 监听 $route 对象的变化,当路由发生变化时重新加载数据或执行其他操作。
2.利用路由参数来传递参数,并响应参数变化重新加载页面数据。
Vue中给当前页面传递参数并重新加载
// 在组件的 created 钩子中监听 $route 对象的变化
created() {
this.loadData(); // 初始化加载数据
this.$watch('$route', () => {
this.loadData(); // 监听路由变化,重新加载数据
});
},
在组件的 created 钩子中初始化加载数据,并使用 $watch 监听 $route 对象的变化。当路由参数发生变化时,调用 loadData 方法重新加载数据。确保路由参数的变化会触发重新加载数据的逻辑。
在传递参数时,可以使用路由参数或查询参数,根据具体情况选择适合的方式。希望这个示例能帮助你实现在Vue中给当前页面传参并重新加载数据的功能。
GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 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> 6 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)