传统的锚点定位会与vue-router中的路由设置存在冲突,解决方法自定义锚点跳转:

html:

<ul>
<li><a href="" @click.prevent="custormAnchor('firstAnchor')">公共报文头</a></li>
</ul>

js:

methods: {
custormAnchor(anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在,就跳转到锚点
if(anchorElement) { anchorElement.scrollIntoView(); }
}
}

解决vue路由与锚点冲突的更多相关文章

  1. 解决vue与传统jquery插件冲突

    比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...

  2. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  3. 第七十三篇:解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

  4. 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

    https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...

  5. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  6. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  7. vue路由跳转报错解决

    vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...

  8. Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决

    今天碰到一个问题   vue路由跳转到新的页面时会直接显示页面最底部  正常情况下是显示的最顶部的  而且好多路由中不是全部都是这种情况  折腾好长时间也没解决  最后在网上找到了解决办法 其实原理很 ...

  9. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

随机推荐

  1. react native组件的生命周期

    react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...

  2. 2017软工 — 每周PSP

    1. PSP表格 2. PSP饼图 3. 本周进度条 4. 累计折线图

  3. Android:有关下拉菜单导航的学习(供自己参考)

    Android:有关==下拉菜单导航==的学习 因为先前的学习都没想着记录自己的学习历程,所以该博客才那么迟才开始写. 内容: ==下拉菜单导航== 学习网站:android Spinner控件详解 ...

  4. Centos 关闭图形界面

    查看/etc/inittab如下: # systemd uses 'targets' instead of runlevels. # by default, there are two main ta ...

  5. Java接口interface,匿名内部类

    接口 1.接口内部为 常量+公用的抽象方法.类必须实现接口中的所有方法 2.接口的语法格式:不写abstract会自动添加,可以继承多个接口 修饰符不能使private,protected [修饰符] ...

  6. c# 消息机制篡改

    1.背景介绍: c#程序想要针对某个的消息进行别的行为.例如:窗体不可拖动. 2.应用函数WinProc 以窗口不可拖动举例: const int WM_NCLBUTTONDOWN = 0x00A1; ...

  7. python爬虫调用搜索引擎及图片爬取实战

    实战三-向搜索引擎提交搜索请求 关键点:利用搜索引擎提供的接口 百度的接口:wd="要搜索的内容" 360的接口:q="要搜索的内容" 所以我们只要把我们提交给 ...

  8. C/C++学习计划

    学习内容:C语言程序设计精髓/计算机程序设计(C++) 学习理由:基础比较薄弱,想先打好基础. 时间安排:每天学习两课时. mooc地址:http://www.icourse163.org/home. ...

  9. HDU 5273 Dylans loves sequence 暴力递推

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5273 bc:http://bestcoder.hdu.edu.cn/contests/con ...

  10. 读我是一只IT小小鸟有感

    进入大学半年了,每个人都说软件工程是一个非常有前途的高薪职业,但我这半年来都很迷茫,看不清自己的未来,不知道如何度过接下来的三年半时光,虽然我也认为软件工程是有前途的专业,但是经过一学期的学习,发现不 ...