zoukankan      html  css  js  c++  java
  • vue 跳转 同一路由不刷新问题解决

    vue跳转同一路径时,路由参数改变,但页面无法更新

    问题原因

    vue路由切换实际是组件间的切换,引用相同组件的时候,页面就无法更新

    解决方案
    方案1.watch监听路由参数变化,并重新渲染(谨慎选择)

    该可以实现页面重新加载数据效果,但会出现页面单独刷新出错,滚动条没有返回顶部问题,根据业务需要选择此解决方法

    方案2. provide和inject结合使用(推荐使用)

    实现思路:在app.vue目录下,对<router-view></router-view>进行摧毁和重建(通过变量routerAlive的状态控制),页面会进行重新渲染。

    下面是方案2的具体实现:

    //app.vue
    <template>
      <div id="app">
        <router-view v-if="routerAlive"  />
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          routerAlive:true
        }
      },
      provide(){
        return {
          routerRefresh: this.routerRefresh
        }
      },
      methods:{
        routerRefresh(){
          this.routerAlive = false;
          this.$nextTick(()=>{
              this.routerAlive = true;
          });
        },
      }
    
    }
    </script>


    //page.vue
    <template>
      <div>
          <div>跳转到当前页,并改变参数,重新渲染</div>
          <button @click="linkToCurPage">跳转</button>
      </div>
    </template>
    
    <script>
    export default {
      inject:['routerRefresh'],   //在子组件中注入在父组件中创建的属性
      data() {
        return {
          paramsData:this.$route.query.paramsName,//当前页面url所带参数 假设为1
        }
      },
    
      mounted(){
        //渲染页面数据
        this.getData();
      },
      methods:{
        //页面数据请求
        getData(){
          const that=this;
          //请求参数
          let params={
            params:this.paramsData
          };
    
          //发送请求...
          
        },
    
        //跳转页面
        linkToCurPage:function(){
          this.paramsData=2; //更改参数信息
          this.$router.push({
            path:"/page",
            query:{
              paramsName:this.paramsData
            }
          this.routerRefresh();//调用app.vue里面的routerRefresh()方法,完成摧毁和重建过程
        },
      }
    };
    </script>
  • 相关阅读:
    flash中网页跳转总结
    as3自定义事件
    mouseChildren启示
    flash拖动条移出flash无法拖动
    需要一个策略文件,但在加载此媒体时未设置checkPolicyFile标志
    Teach Yourself SQL in 10 Minutes
    电子书本地转换软件 Calibre
    Teach Yourself SQL in 10 Minutes
    Teach Yourself SQL in 10 Minutes
    Teach Yourself SQL in 10 Minutes – Page 31 练习
  • 原文地址:https://www.cnblogs.com/zhyp/p/14646692.html
Copyright © 2011-2022 走看看