问题:
- anchor 锚点组件默认会给地址路径加上类似 #/url 的后缀,当刷新页面时nginx会报404
- 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) {
e.preventDefault()
let srcolls = document.querySelector(link.href)
srcolls.scrollIntoView(true)
},
getContainer() {
const ele = document.querySelector('#container-content')
return ele
},
}
<style lang="less" scoped>
#container-content{
height: 80vh;
overflow: auto
}
</style>