vue跳转分页锚点添加

最新推荐文章于 2023-11-13 17:37:28 发布

释胤

最新推荐文章于 2023-11-13 17:37:28 发布

阅读量120

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_33565046/article/details/129174608

版权

文章讲述了在Vue.js应用中，如何从首页携带参数到分页，并使用jQuery实现平滑滚动定位到特定锚点。在mounted生命周期钩子中获取参数，然后调用goAnchor方法，通过调整滚动位置实现锚点定位。同时，配置webpack的ProvidePlugin来全局引入jquery。

摘要由CSDN通过智能技术生成

首页,首页要携带参数到分页

<a href="/product?name=number"></a>

分页,注意使用该方法需要引入[jquery]

 // 标签内需要设定 对应参数的 id
import $ from "jquery"

mounted() { 
    // 获取首页携带参数
      this.herfName = this.$route.query.name 
       // 执行方法 
      this.goAnchor(this.herfName) 
    },

 methods:{
//平滑方法
    goAnchor(selector) { 
          console.info("selector1", selector) 
          var anchor = document.querySelector('#'+selector);//获取元素  
          console.info("anchor", anchor) 
          if (anchor) { 
              setTimeout(() => {//页面没有渲染完成时是无法滚动的，因此设置延迟 
                  //anchor.scrollIntoView(); //js的内置方法，可滚动视图位置至元素位置    
                  var targetOffset = $('#'+selector).offset().top-20; 
                  console.info("targetOffset", anchor, targetOffset) 
                  $('html,body').animate({ 
                      scrollTop: targetOffset 
                  }, 500); 
              }, 100); 
          } 
      },
}

vue.config.js配置

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}