返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中PC端地址跳转移动端的操作方法
  • 765
分享到

vue中PC端地址跳转移动端的操作方法

2024-04-02 19:04:59 765人浏览 薄情痞子
摘要

需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面。 这个需求实

需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面。

这个需求实现的方式比较明了,我的大致思路是在路由守卫处监听每个进来的路由请求,分析该请求是否是由移动端访问,若不是,则该路由请求直接放行;若是则分析要进入的路由路径,提取路径中的必要字段,组合称新的移动端链接即可。

里面涉及到了三个知识点:1、路由守卫,2、客户端判断、3、正则提取文字,接下来就分别按照这几点讲解一下,并附上整个开发过程的源码,供大家参考学习或批评指正。

1、路由守卫

  • to:要进入的路由
  • from:从哪个路由访问
  • next:路由控制参数,常用next(true),和next(false)

//所有的路由请求都会经过该路由守卫,
router.beforeEach((to, from, next) => {
	
    //访问链接如:Http://localhost/page/detail/IUKGEQ/108/9933/32279/8
    //访问路径为:/page/detail/IUKGEQ/108/9933/32279/8
  	let toUrl = to.path;
                                                                       
    //该路由请求放行
    next();

});

2、判断客户端

navigator.userAgent:可获取浏览器用于HTTP请求的用户代理头的值


 if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
            if(/Android|WEBOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            	//处理移动端的业务逻辑
            }else{
				//处理电脑端的业务逻辑
            }
   }

3、正则表达式js

语法

/正则表达式主体/修饰符(可选)

修饰

表达式 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。

search()

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。若无则返回**-1**。


// 不区分大小写                  
var index = 'Hello World!'.search(/world/i);

replace()

replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。


var txt = 'Microsoft'.replace("Microsoft","World");

test()

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false


var flag = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);

exec()

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。


var matchParams = /(\d{1,3})\/(\d{4,6})\/(\d{4,6})/.exec('/page/detail/IUKGEQ/108/9933/32279/8')

正则语法参考:https://www.runoob.com/regexp/regexp-syntax.html

4、源码:


export default ({ app }) => {
    app.router.beforeEach((to, from, next) => {
        if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
            if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                //电脑端访问,则直接放行
                next();
            }else{

                var sCode = '';
                let toUrl = to.path;
                //标识获取方式1:从请求链接中获取
                //如:/page/detail/IUKGEQ/108/9933/32279/8
                //如:/IUKGEQ
                //正则表达式提取连接中的 六位大写字母的标识
                let matchArr = toUrl.match('\/([A-Z]{6})');
                if((sCode=='' || sCode == null || sCode == undefined) && matchArr != null){
                    sCode = matchArr[1];
                }
    
                //标识获取方式2:发起请求获取Code 
                //如:/swpu
                let matchArr2 = toUrl.match('\/([a-z]{3,})');
                if((sCode=='' || sCode == null || sCode == undefined) && matchArr2 != null){
                    var param = matchArr2[1];
                    getSInfo2(param)
                    .then(res => {
                      if (res.data.code) {
                        sCode = res.data.code;
                        //路由跳转
                        mobileRouteCombine(toUrl,sCode);
                      } else {
                        // 查不到code
                        next();//放行
                      }
                    })
                    .catch(err => {
                        next();//放行
                    });
                }
                //上面两种种方式如果都无法取出code,则直接放行
                if(sCode=='' || sCode == null || sCode == undefined){
                    next();
                    return;
                }else{
                    //路由跳转
                    mobileRouteCombine(toUrl,sCode);
                }
            }
        }
        next();
    })
}


function mobileRouteCombine(toUrl,sCode){
    var wxHomeUrl = conf.weixin + '/build/index.html?scode=' + sCode + '#/';
                
    // toUrl为 如 /IUKGEQ 形式,则直接跳转微信首页
    if(toUrl.length <= 7){
        location.href = wxHomeUrl;
    }

    //文章列表
    if(toUrl.indexOf('/page/list/') != -1){
        let matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})'); 
        let catId = matchParams[2];
        let versionId = matchParams[1];//版本id
        var url = wxHomeUrl +'articleList?catId=' + catId;
        location.href = url;     
    }

    //文章详情
    if(toUrl.indexOf('/page/detail/') != -1){
        let matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})\/(\\d{4,6})'); 
        let infoId = matchParams[3];
        let catId = matchParams[2];
        let versionId = matchParams[1];//版本id
        var url = wxHomeUrl +'articleDetail?infoId=' + infoId + '&catId=' + catId;
        location.href = url;     
    }
}

到此这篇关于Vue中PC端地址跳转移动端的文章就介绍到这了,更多相关vue地址跳转移内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue中PC端地址跳转移动端的操作方法

本文链接: https://lsjlt.com/news/156317.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中PC端地址跳转移动端的操作方法
    需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面。 这个需求实...
    99+
    2024-04-02
  • Nuxt.js中PC与移动端间自动识别跳转
    目录了解问题解决了解 官网类网站,需要考虑seo,使用了 nuxt.js 的 ssr 开发。pc端和移动端分离了,相当于两个独立的项目,部署在同一个服务器上,绑定不同域名。 问题 需...
    99+
    2024-04-02
  • ​Wordpress更改端口后访问自动跳转老端口的方法
    这篇文章主要介绍了Wordpress更改端口后访问自动跳转老端口的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Wordpress更改端口后访问自动跳转老端口刚开始首次安...
    99+
    2023-06-14
  • vue移动端自适应的方法是什么
    这篇文章主要介绍“vue移动端自适应的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue移动端自适应的方法是什么”文章能帮助大家解决问题。方案1:直接引入js  (自己 写的动...
    99+
    2023-07-04
  • vue移动端实现手指滑动效果的方法
    本篇内容主要讲解“vue移动端实现手指滑动效果的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue移动端实现手指滑动效果的方法”吧!本文实例为大家分享了vue移动端实现手指滑动效果的具体代...
    99+
    2023-06-20
  • php判断客户端是pc还是移动设备的方法示例
    这篇文章主要介绍了php判断客户端是pc还是移动设备的方法示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。php判断客户端是pc还是移动设备的方法:根据php的$_SERV...
    99+
    2023-06-06
  • 阿里云服务器更换IP地址的方法及手机端操作指南
    本文将详细介绍如何在阿里云服务器上更换IP地址,并提供详细的手机端操作指南。通过阅读本文,读者将了解更换IP地址的步骤、注意事项以及常见问题的解决方法。 随着互联网技术的发展,企业对于服务器的安全性和稳定性要求越来越高。在阿里云服务器上更换...
    99+
    2024-01-25
    阿里 操作指南 地址
  • vue中的H5移动端项目 真机测试配置方式
    目录H5移动端项目 真机测试配置vue cli2vue cli4vue h5 真机调试H5移动端项目 真机测试配置 vue cli2 1.配置网段:(手机和电脑在同一局域网内) 2....
    99+
    2024-04-02
  • vue移动端html5页面根据屏幕适配的方法有哪些
    这篇文章主要介绍“vue移动端html5页面根据屏幕适配的方法有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue移动端html5页面根据屏幕适配的方法有哪些...
    99+
    2024-04-02
  • 怎么理解CSS中的rem及移动端的布局方法
    本文小编为大家详细介绍“怎么理解CSS中的rem及移动端的布局方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么理解CSS中的rem及移动端的布局方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • 在 Linux 终端中查找域名 IP 地址的命令(五种方法)
    本教程介绍了如何在 linux 终端验证域名或计算机名的 IP 地址。本教程将允许你一次检查多个域。你可能已经使用过这些命令来验证信息。但是,我们将教你如何有效使用这些命令在 Linux 终端中识别多个域的 IP 地址信...
    99+
    2022-06-04
    linux 终端 ip 终端域名ip
  • 通过netty把百度地图API获取的地理位置从Android端发送到Java服务器端的操作方法
    本篇记录我在实现时的思考过程,写给之后可能遇到困难的我自己也给到需要帮助的人。写的比较浅显,见谅。 在写项目代码的时候,需要把Android端的位置信息传输到服务器端,通过Netty...
    99+
    2022-11-13
    百度地图API获取地理位置 Android端发送到Java服务器端
  • HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法
    这篇文章主要介绍HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽...
    99+
    2023-06-09
  • web前端面试中常考的字符串操作方法有哪些
    本篇内容介绍了“web前端面试中常考的字符串操作方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一...
    99+
    2024-04-02
  • Windows XP中鼠标右键菜单添加移动到文件夹的操作方法
    这篇文章给大家介绍Windows XP中鼠标右键菜单添加移动到文件夹的操作方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。这个技巧已经很老了,不过还是十分有用,所以今天编程网再次拿出来。我们在Windows XP的文...
    99+
    2023-06-14
  • Linux下OpenSSL客户端中使用req命令来生成证书的操作方法
    这篇文章给大家介绍Linux下OpenSSL客户端中使用req命令来生成证书的操作方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。openssl req 用于生成证书请求,以让第三方权威机构CA来签发,生成我们需要的...
    99+
    2023-06-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作