在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. Creating Excel files with Python and XlsxWriter——Introduction

    XlsxWriter 是用来写Excel2007版本以上的xlsx文件的Python模块. XlsxWriter 在供选择的可以写Excel的Python模块中有自己的优缺点. #---------- ...

  2. Python 模块源

    1.官方:https://pypi.org/ 2.LFD UCI :https://www.lfd.uci.edu/~gohlke/pythonlibs/ 4.清华源:https://pypi.tun ...

  3. c# listview数据预览(转载的放在这里备用)

    public class PrintListView : ListView { /// <summary> /// 指示是否进行打印预览,默认值为 true /// </summar ...

  4. OPC客户端开发问题总结

    环境准备 采用MatrikonOPC做模拟服务器,注册 OPCDAAuto.dll组件 引用 Interop.OPCAutomation.dll组件.开始开发. 1..new OPCServer()- ...

  5. Linux系统中lvm简介

    LVM逻辑卷管理器 实战场景:对于生产环境下的服务器来说,如果存储数据的分区磁盘空间不够了怎么办? 答:只能换一个更大的磁盘.如果用了一段时间后,空间又不够了,怎么办?再加一块更大的?换磁盘的过程中, ...

  6. 缓冲区 subprocess 黏包 黏包的解决方案

    缓冲区: 将程序和网络解耦输入缓冲区输出缓冲区 print('>>>>', server.getsockopt(SOL_SOCKET, SO_SNDBUF)) 查看输出缓冲区大 ...

  7. uni-app 调用支付宝支付

    本文讲解  uni-app如何调用支付宝进行支付,服务端为 .net编写. 客户端:uni-app 编写  1.根据服务端生成的订单信息发起支付. 服务端:.net 编写 1.生成订单信息.2.接收支 ...

  8. python 最大连续子数组的和

    抛出问题: 求一数组如 l = [0, 1, 2, 3, -4, 5, -6],求该数组的最大连续子数组的和 如结果为[0,1,2,3,-4,5] 的和为7 问题分析: 这个问题很简单,直接暴力法,上 ...

  9. LINUX新建和增加SWAP分区

    我们都知道在安装Linux系统时在分区时可以分配swap分区,而系统安装后(在运行中)如何建立或调整swap分区呢? 在装完Linux系统之后,建立Swap分区有两种方法. 1.新建磁盘分区作为swa ...

  10. html5自带表单验证

    起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...