在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. getOrCreateEnvironment()方法源码探究

    该方法目的是创建一个环境对象,并且根据环境类型,自动判断是创建web环境对象,还是标准非web环境对象. 首先该方法源于prepareEnvironment准备环境: 然后进入该方法源码: 可以发现: ...

  2. 2018-2019-2 20175227张雪莹《Java程序设计》 实验二《Java面向对象程序设计》

    2018-2019-2 20175227张雪莹<Java程序设计> 实验二<Java面向对象程序设计> 实验报告封面 课程:Java程序设计 班级:1752班 姓名:张雪莹 学 ...

  3. Android Studio Gradle配置工具开发

    by 蔡建良 2019-3-9 QQ: 304125648 Android Studio导入项目经常出现卡死的情况.针对Gradle更新配置的问题,网上已经有详细的方法,但也很烦索,步骤也很多. 因此 ...

  4. 案例学编程系列:案例认识 Spring IOC

    本文spring libs 地址:https://github.com/yizhiamumu/springlibs Spring 能帮我们做什么 ①.Spring 能帮我们根据配置文件创建及组装对象之 ...

  5. Logic and Proofs--离散数学

    Propositions: A proposition is a declarative sentence(that is, a sentence that declares a fact ) tha ...

  6. jar包冲突排解方法(sbt)

    jar包依赖冲突,版本不兼容会导致各种各样的问题.这里推荐一款sbt插件用于查找项目中的jar包依赖关系,通过该插件可以轻松的看出某个jar包依赖哪些jar,以及某个jar被哪些jar所依赖.此外该插 ...

  7. 开发环境 pyenv

    pyeny githup地址:https://github.com/pyenv/pyenv/ 安装时使用pyeny提供安装工具进行安装 githup 地址:https://github.com/pye ...

  8. 解决导出CSV后在EXCEL打开纯数字前面0丢失问题

    select ip ,concat('="',accountname,'"')select ip ,concat('="',accountname,'"')

  9. rabbitmq支持.net framwork 3.5的最后版本

    方便后来人!!!经过一系列的确认!! rabbitmq支持.net framwork 3.5的最后版本是3.4.3, 安装步骤: 1.工具->Nuget程序包管理器,进入控制台 2.Instal ...

  10. kubelet工作原理

    在调度这一步完成后,Kubernetes 就需要负责将这个调度成功的 Pod,在宿主机上创建出来,并把它所定义的各个容器启动起来.这些,都是 kubelet 这个核心组件的主要功能. kubelet ...