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

 更新时间:2021年11月03日 14:34:23   作者:Courage-He  
最近小编接到一个项目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();
    })
}

/**
 * 移动端路由重组
 * @param {访问的url地址} toUrl 
 * @param [code] sCode 
 */
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地址跳转移内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3.0使用taro-ui-vue3引入组件不生效的问题及解决

    vue3.0使用taro-ui-vue3引入组件不生效的问题及解决

    这篇文章主要介绍了vue3.0使用taro-ui-vue3引入组件不生效的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue interceptor 使用教程实例详解

    vue interceptor 使用教程实例详解

    本文通过实例代码给大家介绍了vue interceptor 使用,需要的朋友可以参考下
    2018-09-09
  • Vue UI框架的主题切换功能实现

    Vue UI框架的主题切换功能实现

    在如今,很多网页已经可以手动切换明亮模式和黑暗模式,网页的主题切换已经成为了一个常用的需求,因此,本文将从常见框架的处理方式总结一些相关的操作,对vue ui框架主题切换功能感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • nginx部署访问vue-cli搭建的项目的方法

    nginx部署访问vue-cli搭建的项目的方法

    本篇文章主要介绍了nginx部署访问vue-cli搭建的项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue实现tab切换的3种方式及切换保持数据状态

    vue实现tab切换的3种方式及切换保持数据状态

    这篇文章主要给大家介绍了关于vue实现tab切换的3种方式及切换保持数据状态的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的 渐进式框架。本文给大家介绍Vue.js开发环境搭建的详解讲解,感兴趣的朋友一起看看吧
    2016-11-11
  • Vue对象的深层劫持详细讲解

    Vue对象的深层劫持详细讲解

    这篇文章主要介绍了vue2.x对象深层劫持的原理实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 详解Vue中router-view组件的使用

    详解Vue中router-view组件的使用

    router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,所以下面小编就来和大家详细聊聊router-view组件的具体使用方法,希望对大家有所帮助
    2023-06-06
  • Vue局部组件数据共享Vue.observable()的使用

    Vue局部组件数据共享Vue.observable()的使用

    随着组件的细化,就会遇到多组件状态共享的情况,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况,感兴趣的可以了解一下
    2021-06-06
  • 关于element-ui中@selection-change执行两次的问题

    关于element-ui中@selection-change执行两次的问题

    这篇文章主要介绍了关于element-ui中@selection-change执行两次的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论