跳转路由时,要求跳转到指定路由的某个地方,可以使用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控制路由滚动行为的更多相关文章

  1. vue中嵌套的iframe中控制路由的跳转及传参

    在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参 ...

  2. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  3. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  4. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  5. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  6. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  7. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

  8. vue的路由安全验证

    在传统的网页中: view层是由后端控制的,用户的请求到达后端的控制器中,只有当安安全全没有丝毫异常的情况下,后端才会将完成数据的渲染,返回给前端视图 前后端分离的项目: view层的切换权,转交给了 ...

  9. Vue 嵌套路由使用总结

    Vue 嵌套路由使用总结   by:授客 QQ:1033553122   开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https://nodejs.org/ ...

随机推荐

  1. VB6 二维数组去重实现

    关于VB6的二维数组去重算法实现 当然,这里还是有局限性,当我们的数组被填满了各个不同的值时,例如下方 700*700 = 490000 就要While49万次,这谁受得了? 所以以下仅适合小规模使用 ...

  2. 2017-11-11 Sa Oct Is it online

    2017-11-11 Sa Oct Is it online 9:07 AM After breakfast I tried connecting to the course selection sy ...

  3. linux下用数据泵导入导出(impdp、expdp)

    expdp和impdp expdp假设a用户的默认表空间是a,导出用户a所有数据: 如果是多实例 需要在命令行或终端手工指定实例 set ORACLE_SID=实例名 否则回报ORA-12560: T ...

  4. 安装MCScanX

    1.首先安装依赖软件 the Java SE Development Kit (JDK) and “libpng” 参考路径:https://mp.weixin.qq.com/s?src=11& ...

  5. 3D Math Keynote 4

    [3D Math Keynote 4] 1.三角带. 合并三角带能够提升渲染效率. 三角扇. 2.边缩坍,将边缩减为顶点 . 网格消减,使用边缩坍,可以实现渐进式网络. 3.下图左边是面拆分.右边是焊 ...

  6. CHROME浏览器清缓存

  7. His表(简化)

    门诊登记,门诊结算,门诊处方,住院登记,住院结算,住院处方,转诊登记,人员表,行政区划,登录日志,菜单,疾病,药品,诊疗,数据字典,机构,科室等

  8. IO输入输出流

    在Java中进行文件的读写,Java IO流是必备的知识. IO流指 的是输入输出流,用来处理设备上的数据.这里的设备指硬盘,内存,键盘录入,网络传输等. 按处理数据类型来分:字节流和字符流. 按流的 ...

  9. mysql学习笔记--数据库事务

    一.概念 1. 事务是一个不可分割的单元 2. 事务作为一个整体要么一起执行,要么一起回滚 二.事务操作 1. 开启事务 start transaction 或者begin [work] 2. 提交事 ...

  10. centos7 使用ss和Privoxy 实现命令行访问google

    1.更新yum 这里可能更新时间有点长,,稳住~别急 yum -y upgrade 2.安装 epel-release 这个必须先安装,因为: python-pip 和 privoxy 都在EPEL源 ...