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

[haizhilin2013]

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

[wenyejie]

watch

[zhaoling906]

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

[LQY-3777]

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

[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]

1.watch
2.导航守卫

[zhaoling906]

干啥玩意？咋又给我发？？？

------------------ 原始邮件 ------------------
发件人: "WenJieLi1998"<[email protected]>;
发送时间: 2020年4月19日(星期天) 上午10:56
收件人: "haizlin/fe-interview"<[email protected]>;
抄送: "Coisini"<[email protected]>;"Comment"<[email protected]>;
主题: Re: [haizlin/fe-interview] [vue] vue-router如何响应路由参数的变化？ (#383)

1.watch
2.导航守卫

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.