vue-router如何响应路由参数变化?


问题:为什么要响应参数变化?

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

解决方案:

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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM