解决vue路由与锚点冲突
传统的锚点定位会与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路由与锚点冲突的更多相关文章
- 解决vue与传统jquery插件冲突
比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题.引用官方vue1.0和2.0的两个例子,学习一下. 例子1 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- 第七十三篇:解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...
- 解决vue路由history模式刷新后404的问题
server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- vue路由跳转报错解决
vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
随机推荐
- 依据Right-BICEP要求的对四则运算2的测试
代码: #include <iostream> #include <time.h> #include <stdio.h> #include <stdlib.h ...
- 第八次作业(课堂实战)- 项目UML设计
本次作业博客 团队信息 队名:起床一起肝活队 原组长: 白晨曦(101) 原组员: 李麒 (123) 陈德斌(104) 何裕捷(214) 黄培鑫(217) 王焕仁(233) 林志华(128) 乐忠豪( ...
- POJ2528的另一种解法(线段切割)
题目:Mayor's posters 原文地址 首先本题题意是:有一面墙,被等分为1QW份,一份的宽度为一个单位宽度.现在往墙上贴N张海报,每张海报的宽度是任意 的,但是必定是单位宽度的整数倍,且&l ...
- 周总结<1>
由于都不清楚周总结的格式,所以就没有写了.不过,上次听了老师的课,觉得应该要好好写写了,至少今后可以明白自己有做过什么事情,至少不会觉得自己在各个方面没有收获.不过,可能没有按照格式来写.希望老师体谅 ...
- .NET Core使用EF分页查询数据报错:OFFSET语法错误问题
在Asp.Net Core MVC项目中使用EF分页查询数据时遇到一个比较麻烦的问题,系统会报如下错误: 分页查询代码: ) * condition.PageSize).Take(condition. ...
- so加载报错:dlopen failed: couldn't map ... Permission denied
转自:https://blog.csdn.net/u013270444/article/details/60869376 问题描述: 我的应用当中集成了一个安全相关的sdk,而这个sdk中使用的so是 ...
- C 语言疑难杂症 [转:http://blog.chinaunix.net/uid-20688544-id-1894880.html]
无聊在网上找了些C语言的东东练一下手,竟然发现其实还有好多细节之前,没注意到,该好好复习一下先. 解决掉的问题先不发出来,把疑问的先做个笔记,过几天解决了就回来修改补上. #include < ...
- jenkins 配置git 学习
由于Jenkins没有默认安装Git插件,需要Git库同步时候,需要手动选择安装git插件 在“系统管理”->“管理插件”中找到,“可选插件”选项卡.“过滤“(一个名为过滤的搜素窗口)中可以用键 ...
- python判断字符串是否包含子字符串
python的string对象没有contains方法,不可以使用string.contains的方法判断是否包含子字符串,但是python有更简单的方法来替换contains函数 python的st ...
- 第134天:移动web开发的一些总结(二)
1.响应式布局 开发一个页面,在所有的设备上都能够完美展示. 媒体查询:@media screen and (max-width:100px) { } 媒体类型:screen(屏幕) print(打印 ...