在vue项目中如何使用锚点呢?

在vue-router中定义 scrollBehavior

scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
// savedPosition is only available for popstate navigations.
return savedPosition
} else {
const position = {}
// new navigation.
// scroll to anchor by returning the selector
if (to.hash) {
position.selector = to.hash
}
// 如果meta中有scrollTop
if (to.matched.some(m => m.meta.scrollToTop)) {
// cords will be used if no selector is provided,
// or if the selector didn't match any element.
position.x = 0
position.y = 0
}
// if the returned position is falsy or an empty object,
// will retain current scroll position.
return position
}
}

vue项目锚点的使用的更多相关文章

  1. 一个域名下多个Vue项目

    公司写的网站要英文和中文的,所以就写了两个项目,都是用vue写的单页面项目,但是域名只有一个,所以就想把两个vue项目合并到一个域名下面.思考:vue的页面都是单页面应用,说白了就是一个index.h ...

  2. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  3. vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除

    一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...

  4. Vue项目经验

    Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后 ...

  5. 实现h5公众号分享功能(vue项目也适用)

    在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入 import wx from 'weixin-js-sdk';//引入 Vue. ...

  6. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  7. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  8. vue项目目录介绍

    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...

  9. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

随机推荐

  1. Android嵌套滑动不流畅记录随笔

    ---恢复内容开始--- 今天第一次用到ScrollView嵌套RecyclerView来做页面. 刚开始效果开心得很,非常Very漂亮噢! 纳尼!!!沃特Fuck!出事儿,出事儿! 滑动为何如此不流 ...

  2. H3C IRF MAD检测原理及相关问题验证

    一.IRF简介 IRF(Intelligent Resilient Framework,智能弹性架构)是H3C自主研发的软件虚拟化技术.它的核心思想是将多台设备通过IRF物理端口连接在一起,进行必要的 ...

  3. Unity 中实现粒子系统的 LOD

    模型的 LOD 比较简单,直接使用 Unity 提供的组件 LODGroup 挂到模型物体上,然后分别指定不同 LOD 级别的 Renderer 即可. LODGroup 并不是用距离来控制 LOD, ...

  4. RN 使用第三方字体

    Android: 程序会尝试在 assets/fonts 目录下查找字体文件,如果没找到会使用默认的字体 所以将文件放到路径下才能生效! [project root]/android/app/src/ ...

  5. 【总结】Java异常分类

    链接:https://www.nowcoder.com/questionTerminal/3ded1983c85c4ae197e005bd31777bc7来源:牛客网 Throwable是所有异常的根 ...

  6. springboot项目如何打包成war包

    一.修改打包形式 在pom.xml里设置 <packaging>war</packaging> 二.移除嵌入式tomcat插件 在pom.xml里找到spring-boot-s ...

  7. Hadoop 2.8集群安装及配置记录

    第一部分:环境配置(含操作系统.防火墙.SSH.JAVA安装等) Hadoop 2.8集群安装模拟环境为: 主机:Hostname:Hadoop-host,IP:10.10.11.225 节点1:Ho ...

  8. mybatis的plugin

    1.Mybatis-Plugin的设计思路 听起来一个挺神奇的单词,插件.说白了就是使用了Jdk自带的动态代理.在需要的时候进行代理.AOP怎么用,他就怎么用. Plugin类等价于Invocatio ...

  9. MySql查询问题select from

    一开始这样不行,后来把值用单引号引起来就行了SELECT * FROM reflectmastercore WHERE name=free 就像下面这样 SELECT * FROM reflectma ...

  10. Git命令行入门

    安装 下载与文档地址:https://git-scm.com/book/zh/v2 我使用的是linux系统,故使用命令行安装Git # apt-get install git 配置 # git co ...