解决antd-vue anchor 默认改变路由路径以及不随页面滚动而移动问题

1,787 阅读1分钟

问题:

  1. anchor 锚点组件默认会给地址路径加上类似 #/url 的后缀,当刷新页面时nginx会报404
  2. anchor 组件未指定渲染容器时,锚点不会随页面滚动而移动

解决方法:

// 示例代码
    <a-anchor
        class="container-anchor" 
        :getContainer="getContainer" 
        @click="handleAnchorClick"
    >
      <a-anchor-link href="#b-credit" title="贷款信息" />
      <a-anchor-link href="#b-require" title="客户贷款需求" />
    </a-anchor>
    
    <div id="container-content">
            <!--
            ...
            省略渲染内容
            ...
            -->
    </div>
    /*
    ...
    省略部分代码
    ...
    */
    methods:{
        handleAnchorClick(e, link) {
          // 阻止点击的默认事件修改路由,解决问题1
          e.preventDefault()
          let srcolls = document.querySelector(link.href)
          srcolls.scrollIntoView(true)
        },
        getContainer() {
          //给组件指定渲染的容器,解决问题2
          const ele = document.querySelector('#container-content')
          return ele
        },
    }
     /*
    ...
    省略部分代码
    ...
    */
    <style lang="less" scoped>
        #container-content{
          //容器必须指定高度和滚动属性
          height: 80vh;
          overflow: auto
        }
    </style>