Vue控制路由滚动行为
跳转路由时,要求跳转到指定路由的某个地方,可以使用scrollBehavior方法控制。
用法:
scrollBehavior(to,from,savedPosition){ }
scrollBehavior方法可以返回x,y 坐标点,也可以返回指定的选择器
例子:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../../view/Home.vue'
import Test from '../../view/Test.vue'
import News from '../../view/News.vue'
Vue.use(Router) export default new Router({
routes: [
{
name:"Home",
component:Home,
path:"/"
},
{
name:"Test",
component:Test,
path:"/test"
},
{
name:"News",
component:News,
path:"/news"
},
{ path:"*",
redirect:"/"
}
],
mode:"history",
//跳转到指定路由的指定坐标
scrollBehavior(to,from,savedBehavior){
if(to.path==="/test"){
return {
x:0,
y:100
}
};
// 跳转到指定的选择器
if(to.path==="/news"){
return {
selector:".here"
}
}
}
})
Vue控制路由滚动行为的更多相关文章
- vue中嵌套的iframe中控制路由的跳转及传参
在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参 ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vue权限路由实现方式总结二
之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
- 基于vue的无缝滚动组件
vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...
- vue的路由安全验证
在传统的网页中: view层是由后端控制的,用户的请求到达后端的控制器中,只有当安安全全没有丝毫异常的情况下,后端才会将完成数据的渲染,返回给前端视图 前后端分离的项目: view层的切换权,转交给了 ...
- Vue 嵌套路由使用总结
Vue 嵌套路由使用总结 by:授客 QQ:1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/ ...
随机推荐
- Suse linux enterprise 11添加设置中文输入法的方法
Suse中输入法的设置没有在控制中心中,而是在应用程序里默认会安装好的SCIM输入法设置里边添加. 打开SCIM输入法设置->输入法引擎->全局设置,有很多国家的输入法可以选择,想要的找到 ...
- MongoDB基础入门
1,安装 下载解压安装包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.5.tgz tar -xvzf mongodb- ...
- eclipse与idea快捷键对比以及idea debug、git快捷键
eclipse与idea快捷键 表格中的空格都是忘记了~ 功能 eclipse idea 生成返回值对象 alt+shift+L ctrl+alt+V 找到启动类 ctrl+alt+Home 类的 ...
- js 金额用逗号隔开
function money(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + "") ...
- kafka创建会话,报Error while executing topic command : Replication factor: 1 larger than available brokers: 0.
bin/kafka-topics.sh --create --zookeeper es1:2181 --replication-factor 1 --partitions 1 --topic top ...
- JS——按钮点击事件累加注册问题
最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 案列引自 踮起脚尖眺望6 $(" ...
- 从零开始学spring cloud(八) -------- Eureka 高可用机制
一.Eureka高可用机制介绍 Eureka服务器没有后端存储,但注册表中的服务实例都必须发送心跳以使其注册保持最新(因此可以在内存中完成). 客户端还有一个Eureka注册的内存缓存(因此,他们不必 ...
- Analysis Services 中的服务器属性配置
Analysis Services 中的服务器属性配置: https://docs.microsoft.com/zh-cn/sql/analysis-services/server-propertie ...
- ReentrantLock 实现
ReentrantLock 实现: 关于锁的操作都是依赖于state 的值,当state =0 时候,表示 线程可以获取锁,state =1 表示锁已经占用,等待释放 获取锁的方法: protec ...
- centos7 安装部署zabbix
由于zabbix提供集中的web监控管理界面,因此服务在web界面的呈现需要LAMP架构支持. php 连接mysql服务,因为7版本mysql要收费,所以我们安装mariadb, 一.安装LAMP环 ...