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/ ...
随机推荐
- C++字符串按照指定规则切割的功能模板类,常用的一段检测记录运行时间的代码
template <typename T> struct vector_split { typedef typename std::vector<T>::iterator it ...
- imgtobase64
# -*- coding: utf-8 -*- import re import base64 from cStringIO import StringIO from PIL import Image ...
- 【C++】C++string类总结
一.string的初始化 首先,为了在程序中使用string类型,必须包含头文件 <string>.如下: #include <string> 注意这里不是string.h,s ...
- 布局inline-block问题
当在一行中需要展示多个拥有块级属性的标签元素时,通常选择display:inline-block; 优点:不用设置浮动或定位,浮动脱离文档流还需要清除浮动,定位降低扩展性. 问题: 1.标签元素之间会 ...
- 爬虫之scrapy入门
1.介绍 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的 ...
- 小乌龟 coding 克隆、提交一直提示无权限
因为之前设置过账号,但是网上各种命令行清除都没有用,进入小乌龟设置删除全局配置,系统配置,保存就可以克隆等操作了
- Excel VBA ——字典实用技巧
最近写了一些小功能,对字典有了进一步的理解,太强大了! 个人最近用过的字典应用有这么几个,写下来防止自己忘~同时方便大家 一.查找重复行 [原理]利用字典的exist方法,将数据加入字典时判断一下,如 ...
- 【CPU微架构设计】分布式多端口(4写2读)寄存器堆设计
寄存器堆(Register File)是微处理的关键部件之一.寄存器堆往往具有多个读写端口,其中写端口往往与多个处理单元相对应.传统的方法是使用集中式寄存器堆,即一个集中式寄存器堆匹配N个处理单元.随 ...
- rancher2.1.7 +jenkins +harbor 自动容器CI系统(通过rancher命令行)
jenkins脚本执行示例: //环境定义与 cd $WORKSPACEmodule=news-usercd $module/case $deploy in deploy) //发布模块 //编译/o ...
- Redux 检测状态树变更
一 概述 Redux只是检测引用是否改变. 如果状态树的某个值是对象.数组等,在reducer中需要生成一个新对象.新数组,才能被Redux检测到变更. let fruits = ['apple',' ...