在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. Python2.X和Python3.X的w7同时安装使用

    一.介绍 Python([ˈpaɪθən])是一种面向对象.解释型计算机程序设计语言.Python语法简洁.清晰,具有丰富和强大的类库. Python源代码遵循GPL(GNU General Publ ...

  2. Day11 expandtabs 制表

  3. bash: ./LM35_make_fs: Permission denied 解决办法

    执行命令的时候 ./LM35_make_fs 遇到 permission denied, bash: ./LM35_make_fs: Permission denied权限的问题,可以运行 ls -l ...

  4. kettle无法更新数据库字段解决办法

    刚开始使用kettle,遇到一个问题, 在编写一个转换流程时,如果所操作的表字段名发生了变化(例如表student中id变更问userid),但是在kettle中使用时仍然显示是id,如下图, 此时清 ...

  5. linux中的查找命令find,locate,which,whereis

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了.  which       查看可执行文 ...

  6. C++日常应用-定时器

    定时器的使用:分为有句柄 无句柄两类 有句柄情况下的使用:头文件: 1.添加映射 BEGIN_MSG_MAP(类名) MESSAGE_HANDLER(WM_TIMER, OnTimer) END_MS ...

  7. C# 控件之数据绑定

    增加一个委托方法,可以实现后台多线程直接更新UI界面的值,利用了控件的DataBindings,以及 INotifyPropertyChanged接口和事件委托机制. 如果只是通过INotifyPro ...

  8. linux上安装mysql5.6

    CentOS-6.6+MySQL-5.6 部署环境操作系统:CentOS-6.6-x86_64-bin-DVD1.isoMySQL 版本:mysql-5.6.26.tar.gz操作用户:root系统 ...

  9. 比sort()性能更好的原生js代码实现数组从小到大排序

    nums = [1,2,4,1,34,6,-1,2] for(let i = nums.length - 1; i > 0; i--) { let maxIdx = i; for(let j = ...

  10. Bootstrap table方法,Bootstrap table事件,配置

    调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...