vue 锚点跳转

目录

a标签href属性

scrollTop

keep-alive属性缓存

scrollIntoView()方法

---

a标签href属性

  利用a标记的herf属性和id属性来完成跳转，a标记的herf属性值等于想要跳转去的div的id属性的值。

这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。

demo：

  

     基本信息
     使用状态
     位置信息
  



      

        
        

          

            

              
基本信息
            
          
          

            

            

              

                

                  
设备编号
                  
{{equipmentInfo.equipmentNo}}
                  
规格
                  
{{equipmentInfo.specification}}
                  
创建时间
                  
{{equipmentInfo.addDateTime}}
                  
参数1
                  
{{equipmentInfo.parameter1}}
                
              
            
          
        
        
        

          

            

              
使用状态
            
          
          

            

              

                

                  
使用状态
                  
{{useStatus.useStatus}}
                  
界限值-高
                  
{{useStatus.limitValueHigh}}
                  
报警值-高
                  
{{useStatus.alertValueHigh}}
                
              
            
          
        
        
        

          

            

              
位置信息
            
          
          

            

              

                

                  
街区编码
                  
{{locationInfo.locationNo}}
                  
街区名称
                  
{{locationInfo.locationName}}
                  
大厦编码
                  
{{locationInfo.buildingNo}}
                  
大厦名称
                  
{{locationInfo.buildingName}}
                
              
            
          
        
      
    

scrollTop

 跳转

  需要注意的是，各浏览器下获取 scrollTop 有所差异

  Chrome： document.body.scrollTop

  Firefox： document.documentElement.scrollTop

methods: {
    goAnchor(selector) {
        var anchor = this.$el.querySelector(selector) // 参数为要跳转到的元素id
        document.body.scrollTop = anchor.offsetTop; // chrome
        document.documentElement.scrollTop = anchor.offsetTop; // firefox
    }
}

keep-alive属性缓存

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 

 会动态的将某一个组建绑定在视图中，并缓存数据，通过点击事件动态切换data中的数据，从而实现keep-alive 中component上绑定数据的变化，

demo

HTML

  

    {{tab.name}}
    

     
    
      
    
  

JavaScript

scrollIntoView()方法

scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，

调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平

  基本信息
  使用状态
  位置信息
  采购信息
  质保信息
  折旧信息



        
        

          

            

              
基本信息
            
          
          

            

              

            
            

              

                

                  
设备编号
                  
{{equipmentInfo.equipmentNo}}
                  
规格
                  
{{equipmentInfo.specification}}
                  
创建时间
                  
{{equipmentInfo.addDateTime}}
                  
参数1
                  
{{equipmentInfo.parameter1}}
                
              
            
          
        
        
        

          

            

              
使用状态
            
          
          

            

              

                

                  
使用状态
                  
{{useStatus.useStatus}}
                  
界限值-高
                  
{{useStatus.limitValueHigh}}
                  
报警值-高
                  
{{useStatus.alertValueHigh}}
                
              
            
          
        
        
        

          

            

              
位置信息
            
          
          

            

              

                

                  
街区编码
                  
{{locationInfo.locationNo}}
                  
街区名称
                  
{{locationInfo.locationName}}
                  
大厦编码
                  
{{locationInfo.buildingNo}}
                  
大厦名称
                  
{{locationInfo.buildingName}}
                
              
            
          
        
        
        

          

            

              
采购信息
            
          
          

            

              

                

                  
{{purchase.supplierName}}
                  

                  
联系人
                  
{{pur.supplierPersonName}}
                  
电话
                  
{{pur.supplierPhone}}
                  
岗位
                  
{{pur.supplierPost}}
                
              
            
          
        
        
        

          

            

              
时间日期
            
          
          

            

              

                

                  
生产日期
                  
{{timeDate.productionDate}}
                  
采购日期
                  
{{timeDate.purchaseDate}}
                  
入库日期
                  
{{timeDate.storageDate}}
                  
启用日期
                  
{{timeDate.runDate}}
                
              
            
          
        
        
        

          

            

              
文档信息
            
          
          

            

              

                

                  
文档名称
                  
文档类型
                  
文档概述
                  
上传时间
                  
上传人
                  
操作
                
              
            
          
        
      

methods:{
    Tocontone(){
      document.querySelector("#contone").scrollIntoView(true);
    },
    Toconttwo(){
      document.querySelector("#conttwo").scrollIntoView(true);
    },
    Tocontthree(){
      document.querySelector("#contthree").scrollIntoView(true);
    },
    Tocontfour(){
      document.querySelector("#contfour").scrollIntoView(true);
    },
    Tocontfive(){
      document.querySelector("#contfive").scrollIntoView(true);
    },
    Tocontsix(){
      document.querySelector("#contsix").scrollIntoView(true);
  }
}