在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. docker的windows环境设置

    1.下载docker-install.exe安装VirtualBox.Git.Boot2Docker for Windows 2.设置环境变量,启动boot2docker Core Linux. 可以 ...

  2. SSO+PHS 同步问题修正解决

    参照URL: https://blogs.technet.microsoft.com/latam/2018/03/27/using-the-consistencyguid/ https://chinn ...

  3. Cause: dx.jar is missing

    Cause: dx.jar is missing 解决方案 方案一 copy dx.jar到目标编译版本 查找相应的buildToolsVersion版本下是否有dx.jar存在 如果不存在则可以co ...

  4. Oracle数据库ORA-01109 数据库未打开

    引致 https://blog.csdn.net/colinmok/article/details/39504879?locationNum=11&fps=1  感谢! 在plsql创建了2表 ...

  5. Linux配置虚拟内存

    我的Linux内存很少,所以我给它弄个虚拟内存 首先建立一个1G的空文件: dd if=/dev/zero of=/home/swapfile bs=64M count=16 格式化为swap: mk ...

  6. 使用shell进行etl数据验证

    方法如下: 整理校验的类型,不同的类型配置文件不一样. 1:校验数据增量:需要设置表名,增量字段. 2:非法值校验:设置表名,条件,校验字段,合法值/非法值范围. 3:自定义校验:设置表名,校验名称, ...

  7. golang初识 - install go on ubuntu

    WSL: Ubuntu 18.04 1. install go (1) unzip sudo mkdir -p /usr/local/go sudo tar zxvf go1.12.4.linux-a ...

  8. C# 获取指定路径下的文件结构(树形结构)

    namespace Vue.Content { public class FileNames { public int id { get; set; } public string text { ge ...

  9. Spring boot 自定义拦截器

    1.新建一个类实现HandlerInterceptor接口,重写接口的方法 package com.zpark.interceptor; import com.zpark.tools.Constant ...

  10. 69.纯 CSS 创作一个单元素抛盒子的 loader

    原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...