文档章节

Vue路由守卫(跳转页面置顶的处理方)

o
 osc_wws45aot
发布于 2019/08/20 14:13
字数 1144
阅读 32
收藏 0

精选30+云产品,助力企业轻松上云!>>>

在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对。就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置。因此需要对页面的路由跳转进行优化,需要用到Vue路由的导航守卫。

vue-router提供的守卫方式主要用来通过跳转或者取消的方式守卫导航。有全局的,单独路由独享的,组件级等多种植入导航守卫的机会。

以下为几种导航守卫的类型:

1.全局前置守卫

我们可以使用 router.beforeEach注册一个全局的前置守卫。

const router = new Router ({....})

 router.beforeEach((to,from,next ) => {

// .....

})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法都会接受三个参数:

  1.to:route:即将要进入的目标,路由对象

  2.from:route:当前导航正要离开的路由

  3.next:function 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: truename: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

2.路由独享的守卫

我们可以在路由配置上直接定义 beforeEnter 守卫:

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) 

这些守卫与全局前置守卫的方法参数是一样的。

3.组件内的守卫

最后,我们可以在路由组件内直接定义以下路由导航守卫:

  • beforeRouteEnter
  • beforeRouteUpdate 
  • beforeRouteLeave
const Foo = {
  template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } } 

beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,我们可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) } 

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。

beforeRouteUpdate (to, from, next) { // just use `this` this.name = to.params.name next() } 

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave (to, from , next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } }
最后路由跳转时页面的优化也是可以通过以上的导航守卫的方法进行优化,在此我贴上我在项目遇到的一种情况和自己的解决方式
{
path: 'xxxxxxx',
meta: {
title: 'xxxxxx'
},
component: () => import('./xxxxx'),
beforeEnter: (to, from, next) => {
window.scrollTo(0, 0);
next();
}
},
利用导航守卫和window 的scrollTo属性将页面加载时候正常显示,去掉异常显示。
 
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue中很少用到的点,但却很实用的点

1.用vue做单页应用时,当页面滚动之后,跳转到其他页面,如果跳转到的页面大于一屏的高度,该页面的滚动条不会置顶 解决方案: 在router.js底部加上如下代码 2.if-else闪烁问题,初始数据为空...

雨未浓
2019/07/09
0
0
vue 路由知识点梳理及应用场景整理

最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚。现在重新看一遍文档,重新梳理一下。 vue 路由的原理 说实话,路由我一直...

osc_3rll7emc
2019/04/09
6
0
[Vue.js进阶]从源码角度剖析vue-router(二)

前言 在上篇中主要叙述了 vue-router 的注册和实例化过程,以及如何生成 $router, $route 对象 在本篇中会讲述: $route 对象生成的时机 路由守卫的原理 路由懒加载的原理 文中的源码截图只保...

yeyan1996
2019/05/26
0
0
带你全面分析vue-router源码(万字长文)

https://juejin.im/post/5e456513f265da573c0c6d4b 前言 在前一篇文章——聊一聊实现Vue路由组件缓存遇到的’坑‘中遇到的vue路由组件缓存问题已经解决并对项目进行了适当的优化改进,但是并...

osc_dh3qbz0a
03/19
4
0
带你全面分析vue-router源码(万字长文)

前言 在前一篇文章——聊一聊实现Vue路由组件缓存遇到的’坑‘中遇到的vue路由组件缓存问题已经解决并对项目进行了适当的优化改进,但是并未开探寻究vue-router的源码,这篇就继续上次的话题...

dino小恐龙
02/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux下java环境搭建

1、jdk下载: 官方地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 如下图所示,我这边选择的是红框中的版本 2、压缩包上传至服务器 将下载的压缩包上传...

wc_飞豆
30分钟前
17
0
面试题:Java对象不再使用时,为什么要赋值为null?

前言 许多Java开发者都曾听说过“不使用的对象应手动赋值为null“这句话,而且好多开发者一直信奉着这句话;问其原因,大都是回答“有利于GC更早回收内存,减少内存占用”,但再往深入问就回...

码农突围
32分钟前
22
0
设计模式(5) 原型模式

原型模式 原型模式的适用场景 浅拷贝 深拷贝 用Initialize方法修改初始化状态 原型模式与之前学习的各种工厂方法、单例模式、建造者模式最大、最直观的区别在于,它是从一个既有的对象“克隆...

zhixin9001
32分钟前
7
0
获取免费的pycharm激活码网站

http://www.lookdiv.com/

云烟成雨forever
32分钟前
27
0
用Helm部署Kubernetes应用,支持多环境部署与版本回滚

1 前言 Helm是优秀的基于Kubernetes的包管理器。利用Helm,可以快速安装常用的Kubernetes应用,可以针对同一个应用快速部署多套环境,还可以实现运维人员与开发人员的职责分离。现在让我们安...

南瓜慢说
33分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部