Skip to content

[vue] vue-router如何响应路由参数的变化？ #383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
haizhilin2013 opened this issue Jun 20, 2019 · 6 comments
Open

[vue] vue-router如何响应路由参数的变化？ #383

haizhilin2013 opened this issue Jun 20, 2019 · 6 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] vue-router如何响应路由参数的变化？
@haizhilin2013 haizhilin2013 added the vue vue label Jun 20, 2019
@wenyejie
Copy link

watch

@zhaoling906
Copy link

1.watch
2.在父组件的router-view上加个key

@LQY-3777
Copy link

ickt-5:
路由 vue-router 面试题:
https://blog.csdn.net/Arthas_Xue/article/details/101024666
在父组件的router-view上加个key:
https://www.jianshu.com/p/802f357d9699

@zlqGitHub
Copy link

zlqGitHub commented Dec 22, 2019 •
edited
Loading

问题：为什么要响应参数变化？

  • 切换路由，路由参数发生了变化，但是页面数据并未及时更新，需要强制刷新后才会变化。
  • 不同路由渲染相同的组件时（组件复用比销毁重新创建效率要高），在切换路由后，当前组件下的生命周期函数不会再被调用。

解决方案：

  1. 使用 watch 监听
watch: {
    $route(to, from){
        if(to != from) {
            console.log("监听到路由变化，做出相应的处理");
        }
    }
}
  1. 向 router-view 组件中添加 key
    <router-view :key="$route.fullPath"></router-view>

$route.fullPath 是完成后解析的URL，包含其查询参数信息和hash完整路径

@WenJieLi1998
Copy link

1.watch
2.导航守卫

@zhaoling906
Copy link

zhaoling906 commented Apr 19, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
vue vue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@wenyejie @haizhilin2013 @WenJieLi1998 @zlqGitHub @zhaoling906 @LQY-3777