Skip to content

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

New issue
New issue
Open
Open
[vue] vue-router如何响应路由参数的变化？#383
Labels
vuevue
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Jun 20, 2019
Collaborator

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

Activity

haizhilin2013
added
vuevue
on Jun 20, 2019
wenyejie

wenyejie commented on Jun 21, 2019

@wenyejie
wenyejie
on Jun 21, 2019

watch

zhaoling906

zhaoling906 commented on Oct 20, 2019

@zhaoling906
zhaoling906
on Oct 20, 2019

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

LQY-3777

LQY-3777 commented on Nov 26, 2019

@LQY-3777
LQY-3777
on Nov 26, 2019

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

zlqGitHub

zlqGitHub commented on Dec 22, 2019

@zlqGitHub
zlqGitHub
on Dec 22, 2019 · edited by zlqGitHub

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

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

解决方案：

  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

WenJieLi1998 commented on Apr 19, 2020

@WenJieLi1998
WenJieLi1998
on Apr 19, 2020

1.watch
2.导航守卫

zhaoling906

zhaoling906 commented on Apr 19, 2020

@zhaoling906
zhaoling906
on Apr 19, 2020 via email
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    vuevue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@WenJieLi1998@zlqGitHub@zhaoling906

        Issue actions
          [vue] vue-router如何响应路由参数的变化？ · Issue #383 · haizlin/fe-interview