在用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属性将页面加载时候正常显示,去掉异常显示。
 

Vue路由守卫(跳转页面置顶的处理方)的更多相关文章

  1. vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫

    上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...

  2. vue路由守卫用于登录验证权限拦截

    vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...

  3. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  4. vue 移动端项目切换页面,页面置顶

    之前项目是pc端是使用router的方式实现置顶的 //main.js router.afterEach((to, from, next) => { window.scrollTo(0, 0) ...

  5. Vue 路由守卫解决页面退出和弹窗的显示冲突

    在使用UI框架提供的弹出层Popup时,如Vant UI的popup,在弹出层显示时,点击物理按键或者小程序自带的返回时,会直接退出页面,这明显不符合页面逻辑. 解决思路: 在弹出层显示时,点击了返回 ...

  6. vue路由守卫应用,监听是否登录

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  7. Vue路由守卫之路由独享守卫

    ​ 路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 ...

  8. Vue | 路由守卫面试常考

    前言 最近在整理基础,欢迎掘友们一起交流学习 结尾有彩蛋哦! Vue Router 路由守卫 导图目录 路由守卫分类 全局路由守卫 单个路由守卫 组件路由守卫 路由守卫执行的完整过程 路由守卫分类 全 ...

  9. vue路由守卫

    路由守卫 //路由进来之时 beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined ...

随机推荐

  1. Codeforces New Year and Buggy Bot 题解

    主要思路:全排列,然后按输入的字符串走并且判断是否撞墙 注:这样不会TLE,全排列最多24种 Code(C++): #include<bits/stdc++.h> using namesp ...

  2. 10 大 python 库

    TensorFlow Scikit-Learn Numpy Keras PyTorch LightGBM Eli5 SciPy Theano Pandas 简介 python 是最流行和使用最广泛的编 ...

  3. 品Spring:SpringBoot轻松取胜bean定义注册的“第一阶段”

    上一篇文章强调了bean定义注册占Spring应用的半壁江山.而且详细介绍了两个重量级的注册bean定义的类. 今天就以SpringBoot为例,来看看整个SpringBoot应用的bean定义是如何 ...

  4. 两个变量交换数字 不用第三个变量的情况下 int a = 5,b = 6

    今天可是涨见识额 记录一下 第一种方法: a=a+bb=a-ba=a-b 第二种: b= a+(a=b)*0 一句话搞定

  5. Google Test入门教程:从下载到运行

    本文以VS2019为例,自己的工程使用Debug x64,多线程调试DLL(/MDd),用户可以根据自己需求更改配置,只要所有配置前后统一即可. 第一步:clone Google Test源码 打开h ...

  6. 【JVM 知识体系框架总结】

    JVM 内存分布 线程共享数据区: 方法区->类信息,静态变量 堆->数组对象 线程隔离区 虚拟机栈-> 方法 本地方法栈->本地方法库 native 堆.程序计数器 JVM ...

  7. quartz-scheduler定时器实现

    第一步,在pom.xml中引入quartz-scheduler. <dependency> <groupId>org.quartz-scheduler</groupId& ...

  8. SUSE CaaS Platform 4 - 使用 Ceph RBD 作为持久存储(动态)

    图1 架构图 图2 各存储插件对动态供给方式的支持状况 1.所有节点安装 # yum install ceph-common 复制 ceph.conf 到 worker 节点上 # scp admin ...

  9. python 关于excel弹窗——请注意,您的文档的部分内容可能包含了文档检查器无法删除的个人信息解决方法

    参考https://www.cnblogs.com/Jacklovely/p/6582732.html 这个问题的原因是由于工作簿包含宏.ActiveX控件等内容, 而Excel被设置为在保存文件时自 ...

  10. FFmpeg(五) 重采样相关函数理解

    一.重采样流程 重采样(解码音频数据之后格式不可以直接播放,需要重采样,类似图像的像素转换) 1.分配上下文 2.设置参数(分为(前几个是)输出格式和(后几个)输入格式,两个相对应的) 可以通过改变样 ...