vue 浏览器滚动行为
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routes} from './routes'
Vue.use(VueRouter) const router =new VueRouter({
routes ,
mode:'history',
scrollBehavior(to,from,savedPosition){
//浏览器滚动行为
//return {selector:'.btn'};
//return {x:0,y:100};
if(savedPosition){
return savedPosition;
}else{
return {x:,y:}
}
}
})
//全局守卫
/*router.beforeEach((to,from,next)=>{
//alert("还没有登录,请先登录");
// next();
//判断store.gettes.isLogin ===false
if(to.path == '/login'||to.path == '/register'){
next();
}else{
alert("还没有登录,请先登录");
next('/login');
} })*/
//后置钩子
/*router.afterEach((to,from)=>{
alert("after each");
})*/
new Vue({
el: '#app',
router,
render: h => h(App)
})
浏览器滚动行为:第一种到制定的位置
第二张到制定的标签或者id位置
第三种,到上次浏览的位置
vue 浏览器滚动行为的更多相关文章
- vue浏览器滚动加载更多
created () { var that = this; window.addEventListener('scroll',this.scroll,true) console.log(this.$r ...
- (转)JS浮动窗口(随浏览器滚动而滚动)
原文:http://hi.baidu.com/aiyayaztt/item/4201c55a6b729dced2e10c79 JS浮动窗口(随浏览器滚动而滚动) 往往用于一些联系方式,互动平台模块,随 ...
- 制作不随浏览器滚动的DIV-带关闭按钮
制作不随浏览器滚动的DIV 效果见 http://bbs.csdn.net/topics/90292438 的滚动效果. $(function(){ //获取要定位元素距离浏览器顶部的距离 var ...
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透
可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...
- Vue 无限滚动加载指令
也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的 底部等于(0) = 滚动条高度 - 滚动条顶部距离 - 可视高度. 反正结 ...
- vue插件——滚动监听 vue-scrollwatch
造轮子的目的: 做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够 ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
随机推荐
- 安装运行okvis odometry
源码链接https://github.com/ethz-asl/okvis 1. 安装依赖项 sudo apt-get install cmake sudo apt-get install libgo ...
- Web测试实践-任务进度-Day03
小组成员 华同学.郭同学.覃同学.刘同学.穆同学.沈同学 任务进度 在经过任务分配阶段后,大家都投入到了各自的任务中,以下是大家今天任务的进度情况汇总. 华同学 & 刘同学(任务1) 1.再对 ...
- 并查集 - 1611 The Suspects
题目地址: http://poj.org/problem?id=1611 分析: - 数据结构 - parent[x] 表示 x 元素的父节点位置. - rank[x] 记录x的子链的长度, 以便在合 ...
- EXCEL 导入 R 的几种方法 R—readr和readxl包
导入Excel数据至R语言的几种方法 如有如下Excel数据源,如何将数据导入R语言呢?今天主要来介绍几种常见的方法: 一.使用剪贴板,然后使用read.table函数: 首先选择Excel中的数据源 ...
- Sublime Text 3 -mac简体中文汉化包下载及教程
Sublime Text 3下载 官方下载地址:http://www.sublimetext.com/3 汉化包链接 1.将上面要求下载的sublime_text_3.zip 文件解压,得到的Defa ...
- Hadoop(HDFS、YARN、HBase、Hive和Spark等)默认端口表
端口 作用 9000 fs.defaultFS,如:hdfs://172.25.40.171:9000 9001 dfs.namenode.rpc-address,DataNode会连接这个端口 50 ...
- SpringCloud 教程 | 第一篇: 服务的注册与发现Eureka(Finchley版本)
一.spring cloud简介 鉴于<史上最简单的Spring Cloud教程>很受读者欢迎,再次我特意升级了一下版本,目前支持的版本为Spring Boot版本2.0.3.RELEAS ...
- Ansible应用领域
1.Ansible应用领域 Ansible的编排引擎可以非常出色地完成配置管理.流程控制.资源部署等多方面工作.与其他IT自动化产品相比较,Ansibe为你提供一种不需要安装客户端软件.管理简单.功能 ...
- 关于C#里面SQLite读取数据的操作
做C#朋友的一个获取DataSet函数,对C#不熟,整理整理,了解怎么用 //挂载表格时候用 public static DataSet Query(string SQLString) { using ...
- duilib入门简明教程 -- XML基础类(7)
现在大家应该对XML描述界面不那么陌生了,那么我们做进一步介绍. 前面的教程我们写了很多代码,为的是让大家了解下基本流程,其实duilib已经对常用的操作做了很好的包装,正式使用时无需像前面的教程那样 ...