vue中的锚链接跳转问题
2024-08-27 04:47:37
在vue中的锚链接和普通的html不同,关于vue中的锚链接可以参考vue 中的 scrollBehavior 滚动行为。
在router.js中
//创建 router 实例
const router = new VueRouter({
routes,
mode: ‘history‘,
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
})
export default router;
在vue中 点击跳转的位置 使用<a>链接包起来
<div>
<a href="#populationInformation">人口画像</a>
</div>
<div>
<a href="#peopleCounting">人流统计</a>
</div>
<div>
<a href="#trafficAnalysis">交通分析</a>
</div>
在需要跳转到的位置
<div id=‘populationInformation ‘> 人口画像跳转到此</div>
<div id=‘peopleCounting‘> 人流统计跳转到此 </div>
<div id=‘trafficAnalysis ‘>交通分析跳转到此 </div>
要保证<a>标签的 href 的地址要和下面id的值是相同的才可以完成相应的跳转,至于在router中的配置也是必须的。
最新文章
- Weblogic反序列化漏洞补丁更新解决方案
- bootstrap表格内容垂直居中
- PL/SQL 查找1-100之间的素数
- Android定位&;地图&;导航——自定义公交路线代码
- fastreport totalpage 只有设置doublepassreport为true 才正确否则为0
- 从零开始,在windows上用nodejs搭建一个静态文件服务器
- Python 一路走来 DOM &; Jquery
- C编程技巧
- zoj 2587 Unique Attack 最小割判定
- oracle-sql入门练习及答案
- 痞子衡嵌入式:语音处理工具Jays-PySPEECH诞生记(3)- 音频显示实现(Matplotlib, NumPy1.15.0)
- java内存模型详解
- nodejs静态web服务
- Kubernetes重要概念理解
- UVA11235 Frequent values
- Learning-Python【0】:Windows环境下Python2和Python3的安装
- CAS单点登录的时候出现票根&#39;ST-xxxxxx-cas&#39;不符合目标服务
- springboot+shiro整合教程
- troubleshooting-Kerberos 鉴权异常
- python-day47--mysql数据备份与恢复