zoukankan      html  css  js  c++  java
  • vue_相同组件,不同url跳转不重新渲染的解决方法

    最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型。现在产品的需求是,跳转到不同的类型 需要页面重新渲染数据

    那么问题来了。

    我试了好几种方法,用watch监听路由去判断,但是发现输在input里面的值是不会被替换掉的

    所以想到了用key 去如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。

    因为工作性质,不能贴代码

    所以

    <router-view v-if="isRouterActive" :key="key"></router-view>

    data(){

      return isRouterActive:true,

      key:''

    }

    watch:{

       '$route'(to,from){

          this.isRouterActive = false;

          this.key = Math.random()*1000;

          this.$nextTick(()=>(this.isRouterActive = true))

      }

    }

  • 相关阅读:
    Linux操作系统(二)
    匿名函数和内置函数
    BeautifulSoup
    Robots协议
    列表和生成器表达式
    迭代器
    排序总结
    图论专题笔记
    Trie树的二三事QWQ
    二分答案经典入门题:)
  • 原文地址:https://www.cnblogs.com/qingcui277/p/9600231.html
Copyright © 2011-2022 走看看