zoukankan      html  css  js  c++  java
  • vue通过ID(参数)修改URL复用同一个页面(组件)不重新加载的问题

    项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也显示已经改变,但页面并不会刷新,因为路由是相同的,vue就会认为你是同一个页面,从而复用已加载的页面,而不会重新加载,所以如果在created钩子中来区分状态明显是行不通的,可以通过watch监听事件来监听路由的变化:

    watch: {
              '$route' (to, from) {
                         if (to.name === 'projectAdd') {
                                 console.log(to.query)     // 在此调用函数
                          }
               }
    }
     
    通过watch监听即可实现,这里顺带说一下params和query的区别:
     
    相同
    使用方法相同,都是在路由跳转的时候带过去:
    manageProject (toseId) {
               this.$router.push({
                       name: 'projectAdd',
                       query: {toseId: toseId}       //   params: {toseId: toseId}
               })
    }
     
    不同
    params需要在路由设置index.js中添加参数(
    path: '/projectAdd/:id'),而query不需要;
     
    跳转后在URL的显示不同,params显示的是(http://localhost:8082/#/projectAdd/6),query显示的是(http://localhost:8082/#/projectAdd?toseId=6);
     
    接收方式不同,params为this.$route.params,query为this.$route.query。
     
     
     
    若有错误之处请指出,我会尽快改正,希望对你有帮助
     
     
  • 相关阅读:
    原来这才是 Socket !
    C 语言基础,来喽!
    手把手教你汇编 Debug
    拒做技术小白?计算机关键概念你不得不掌握!
    利用Windbg分析Magicodes.IE一次错误编写导致内存剧增
    Spring Boot整合JApiDocs实现API文档
    Spring Boot 快速整合Swagger
    Python测试框架pytest入门基础
    性能测试之测试分析与调优
    html5调用摄像头截图
  • 原文地址:https://www.cnblogs.com/wangqiao170/p/9176204.html
Copyright © 2011-2022 走看看