vue中PC端地址跳转移动端

跳转移动端"/>

vue中PC端地址跳转移动端

vue中PC端地址跳转移动端

需求：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/8let 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）

语法

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

修饰符

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')

正则语法参考：.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 //如：/swpulet 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 {// 查不到codenext();//放行}}).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];//版本idvar 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];//版本idvar url = wxHomeUrl +'articleDetail?infoId=' + infoId + '&catId=' + catId;location.href = url;     }
}