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.本人在公司 ...
随机推荐
- 前端学习--HTML标签温习一
1.<a>标签 在所有浏览器中,链接的默认外观如下: 1)未被访问的链接带有下划线而且是蓝色的 2)已被访问的链接带有下划线而且是紫色的 3)活动链接带有下划线而且是红色的 提示:如果没有 ...
- 王子和公主 UVa10635
[题目描述]:王子和公主 一个王子和公主在n*n的格子中行走,这些格子是有1....n^2的编号的.现在给定p+1个数,再给定q+1个数,公主和王子可以选择其中某些格子行走,求他们最多能走几个相同的格 ...
- C++ generic tools -- from C++ Standard Library
今晚学了一下C++标准程序库, 来简单回顾和总结一下. 1.pair 结构体 // defined in <utility> , in the std namespace namespac ...
- Ubuntu14.04下使用PPA安装php5.6,php7
1.为了使用ppa(Personal Package Archives) 选安装依赖: # apt-get install python-software-properties 2.添加不同版本php ...
- srand()、rand()、time()函数的用法
srand()就是给rand()提供种子seed. 如果srand每次输入的数值是一样的,那么每次运行产生的随机数也是一样的. 以一个固定的数值作为种子是一个缺点.通常的做法是 :以这样一句srand ...
- [GO]通道的关闭
并不是往通道里放多少次数据,就必须取多次少数据的(之前的例子都是放3次取3次,放10次取10次),我们可以做一个操作,当子协程没有新放入的时候,主协程不再去取,这就是关闭通道 package main ...
- HDU 6005 Pandaland (Dijkstra)
题意:给定一个图,找出一个最小环. 析:暴力枚举每一条,然后把边设置为最大值,以后就不用改回来了,然后跑一遍最短路,跑 n 次就好. 代码如下: #pragma comment(linker, &qu ...
- Animator 设置动画效果
1. 调节预设对象大小适中 2. 设置骨骼,修改关节 3. 拖入预设动作效果对象中 4. 将预设对象拉入场景中,并新建AnimatorController 5. 新建动作或BlendTree,设置参数 ...
- spark介绍2
上述结果是 map 1 filter 1 map 2 filter 2 map 3 filter 3 map 4 filter 4 即说明是并行,且互不干扰,每个task运行到最后
- mysql查询最近7天的数据,没有数据自动补0
问题描述 查询数据库表中最近7天的记录 select count(*),date(create_time) as date from task where datediff(now(),create_ ...