搜索
首页web前端js教程vue移动端路由切换案例解析
vue移动端路由切换案例解析May 21, 2018 pm 03:20 PM
切换案例解析

这次给大家带来vue移动端路由切换案例解析,vue移动端路由切换的注意事项有哪些,下面就是实战案例,一起来看一下。

其中最主要的时以下两个问题:

浏览器导航栏的切换

IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画。

除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的。主要就是解决上面两个问题。

可以看下实际写出来的效果:在线DEMO

1. 浏览器导航栏的切换

通过记录 历史记录 来比较判断前进还是后退

如下例子

A页面 -> B页面 -> C页面

假如我从 A页面到 B页面 再到C页面,历史记录就会产生3条

我们用一个数组表示: ['/a', '/b', '/c']

然后我在通过点击浏览器导航栏的后退按钮, 我便会回到 B 页面,

这时候我只要判断是否存在 B页面, 存在就证明我点的时后退按钮。

然后只要我后退过, 我就能点击浏览器的前进按钮了。这时候怎么判断它到底是前进的呢。

我们可以这样。

当我们后退到了B页面,历史记录不是还保存着['/a', '/b', '/c'] 三个路径吗

我们可以删除B页面后面的路径,那现在就是 ['/a', '/b'];
如果我们后退到A页面, 那么我们保存的路径就是['/a']

只要我们点击前进按钮, 我们去保存的路径里面找, 是不是就找不到路径了, 那样就完成了前进判断。

上面是一种正常的情况。
但是假如我们有点页面重复进入了呢。

就如以下这种情况

A页面 -> B页面 -> C页面 -> B页面 -> C页面

现在走了5步,到达了第二个C页面, 然后我们后退一步,到达了B页面

这个时候问题就出来了,我们是删除第一个B页面后面的路径还是删除第二个B页面后面的路径

我们先试着删除第二个B页面的路径,那么我们还保存的路径就是: ['/a', '/b', '/c', '/b']。

1、那这个时候我们按照上面正常情况的逻辑来操作.

我点击前进, 然后我去保存的路径里面找,找不到就算前进, 找到证明是后退。

那么结果显而易见,我们找到了第一个C页面,那就这样就算后退了,但其实我点击的时前进

2、那我们试着删除第一个B页面后面的路径,那么保存的路径就是: ['/a', '/b'],

那么我在点击后退按钮,这时候他其实会进入C页面, 我们可以看以下流程图

这个时候我们在此点击后退按钮,就会到C页面, 但是保存的路径里面 `'/c'` 已经被我删除了, 所以判断出来的是前进。

1、如果我们过滤重复的页面路径,是不是就会好了呢,其实也是一样的

假如我们有5个页面路径,过滤了2个重复的,只有3个页面路径了

那么我退到第四个路径的时候是不是就找不到了, 那么后面两个页面都会算作前进。

所以以目前来看,最好的办法就是记录每一个页面,但是每个页面,都让他有区别

那么我们就可以在url上面放一个随机字符串

代码实现:


// 当没有key的时候会进入两次 beforeEach,我们只需保存带key的就行
const updateNavigations = (to) => {
 if (to.query[pathKey]) {
  store.commit('UPDATE_NAVIGATIONS', {path: to.fullPath})
 }
}

router.beforeEach((to, from, next) => {
 let toIndex = store.state.navigations.findIndex(path => path === to.fullPath)
 if (toIndex >= 0) { // 存在该路径
  let len = store.state.navigations.length-1
  if (toIndex === len) { // 当前路径是最后一条,证明是同一个页面
   console.log('refresh') 
  } else { // 后退
   store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'back' }) // 后退标志
   store.commit('DELETE_NAVIGATION', { index: toIndex }) // 删除当前路径后面的路径
  }
 }else{ // 不存在该路径
  store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'forward' }) // 前进标志
  updateNavigations(to) // 保存该连接
 }

 const query = { ...to.query }
 // 存在就直接next, 防止死循环
 if (!query['APP_KEY']) { // 不存在添加key ,再次 next
  query['APP_KEY'] = Math.random().toString(16).substring(2)
  next({ path: to.path, query})
 }else{
  next()
 }
})


以上代码我们就能就url中添加一个 APP_KEY 的随机串,那样就算同一个页面在我们保存的路径里面也是其实是不同的。就可以正常的执行逻辑了

上面就基本解决了浏览器导航栏的问题了

2. IOS上的滑动切换

在IOS的网页上, 是可以左右滑动进行切换,即使你没有做转场动画。

这个时候就会出现一个问题。

还是ABC页面

A -> B -> C

当我们到达C页面,然后向左滑动时,滑完他就进入B页面,但是这这时它还是会进入我们的 beforeEach 这个钩子函数里面,执行我们上面的逻辑。

那样就会触发我们的转场动画。你就会发现执行了两次切换。

于是我在网上找到了一种方法fix ios左滑再次执行动画 #2259

代码是这样的


let touchEndTime = Date.now()

window.addEventListener('touchend', () => {
 touchEndTime = Date.now()
})

router.beforeEach((to, from, next) => {
 if ((Date.now() - touchEndTime) < 377) { // ios滑动切换
  store.commit(&#39;UPDATE_ROUTER_DIRECTION&#39;, { routerDirection: &#39;&#39; })
 }
})


上面也很好理解, 就是我们取到手指最后离开的屏幕的那一刻, 然后在到 beforeEach里面进行比较,
当手指离开屏幕的最后一刻跟我们自己 beforeEach里面进行的转场相差小于 337, 就算是IOS的滑动切换

那样就解决了IOS的滑动切换问题了。

但是IOS的右滑切换时监听不到手指离开屏幕的那一刻的(也不知道是什么鬼), 所以IOS的右滑切换,是没法像上面那样判断的。

这个我也没找到解决办法, 暂时只能解决IOS左滑返回的切换。

基本上遇到的比较麻烦的两个点就是上面这两个点了,其余都是可以通过监听事件进行设置,倒也没什么难度

在线DEMO演示

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery类名选择器(.class)使用方法详解

vue动态绑定组件子父组件多表单验证实现步骤详解

以上是vue移动端路由切换案例解析的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python解析XML中的特殊字符和转义序列Python解析XML中的特殊字符和转义序列Aug 08, 2023 pm 12:46 PM

Python解析XML中的特殊字符和转义序列XML(eXtensibleMarkupLanguage)是一种常用的数据交换格式,用于在不同系统之间传输和存储数据。在处理XML文件时,经常会遇到包含特殊字符和转义序列的情况,这可能会导致解析错误或者误解数据。因此,在使用Python解析XML文件时,我们需要了解如何处理这些特殊字符和转义序列。一、特殊字符和

Python编程解析百度地图API文档中的坐标转换功能Python编程解析百度地图API文档中的坐标转换功能Aug 01, 2023 am 08:57 AM

Python编程解析百度地图API文档中的坐标转换功能导读:随着互联网的快速发展,地图定位功能已经成为现代人生活中不可或缺的一部分。而百度地图作为国内最受欢迎的地图服务之一,提供了一系列的API供开发者使用。本文将通过Python编程,解析百度地图API文档中的坐标转换功能,并给出相应的代码示例。一、引言在开发中,我们有时会涉及到坐标的转换问题。百度地图AP

使用Python解析SOAP消息使用Python解析SOAP消息Aug 08, 2023 am 09:27 AM

使用Python解析SOAP消息SOAP(SimpleObjectAccessProtocol)是一种基于XML的远程过程调用(RPC)协议,用于在网络上不同的应用程序之间进行通信。Python提供了许多库和工具来处理SOAP消息,其中最常用的是suds库。suds是Python的一个SOAP客户端库,可以用于解析和生成SOAP消息。它提供了一种简单而

PHP8.0中的XML解析库PHP8.0中的XML解析库May 14, 2023 am 08:19 AM

随着PHP8.0的发布,许多新特性都被引入和更新了,其中包括XML解析库。PHP8.0中的XML解析库提供了更快的解析速度和更好的可读性,这对于PHP开发者来说是一个重要的提升。在本文中,我们将探讨PHP8.0中的XML解析库的新特性以及如何使用它。什么是XML解析库?XML解析库是一种软件库,用于解析和处理XML文档。XML是一种用于将数据存储为结构化文档

使用Python解析带有命名空间的XML文档使用Python解析带有命名空间的XML文档Aug 09, 2023 pm 04:25 PM

使用Python解析带有命名空间的XML文档XML是一种常用的数据交换格式,能够适应各种应用场景。在处理XML文档时,有时会遇到带有命名空间(namespace)的情况。命名空间可以防止不同XML文档中元素名的冲突,提高了XML的灵活性和可扩展性。本文将介绍如何使用Python解析带有命名空间的XML文档,并给出相应的代码示例。首先,我们需要导入xml.et

PHP中的HTTP Basic鉴权方法解析及应用PHP中的HTTP Basic鉴权方法解析及应用Aug 06, 2023 am 08:16 AM

PHP中的HTTPBasic鉴权方法解析及应用HTTPBasic鉴权是一种简单但常用的身份验证方法,它通过在HTTP请求头中添加用户名和密码的Base64编码字符串进行身份验证。本文将介绍HTTPBasic鉴权的原理和使用方法,并提供PHP代码示例供读者参考。一、HTTPBasic鉴权原理HTTPBasic鉴权的原理非常简单,当客户端发送一个请求时

PHP 爬虫实战之获取网页源码和内容解析PHP 爬虫实战之获取网页源码和内容解析Jun 13, 2023 am 10:46 AM

PHP爬虫是一种自动化获取网页信息的程序,它可以获取网页代码、抓取数据并存储到本地或数据库中。使用爬虫可以快速获取大量的数据,为后续的数据分析和处理提供巨大的帮助。本文将介绍如何使用PHP实现一个简单的爬虫,以获取网页源码和内容解析。一、获取网页源码在开始之前,我们应该先了解一下HTTP协议和HTML的基本结构。HTTP是HyperText

PHP中的单点登录(SSO)鉴权方法解析PHP中的单点登录(SSO)鉴权方法解析Aug 08, 2023 am 09:21 AM

PHP中的单点登录(SSO)鉴权方法解析引言:随着互联网的发展,用户通常要同时访问多个网站进行各种操作。为了提高用户体验,单点登录(SingleSign-On,简称SSO)应运而生。本文将探讨PHP中的SSO鉴权方法,并提供相应的代码示例。一、什么是单点登录(SSO)?单点登录(SSO)是一种集中化认证的方法,在多个应用系统中,用户只需要登录一次,就能访问

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),