需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面。
这个需求实现的方式比较明了,我的大致思路是在路由守卫处监听每个进来的路由请求,分析该请求是否是由移动端访问,若不是,则该路由请求直接放行;若是则分析要进入的路由路径,提取路径中的必要字段,组合称新的移动端链接即可。
里面涉及到了三个知识点:1、路由守卫,2、客户端判断、3、正则提取文字,接下来就分别按照这几点讲解一下,并附上整个开发过程的源码,供大家参考学习或批评指正。
//所有的路由请求都会经过该路由守卫, 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(); });
navigator.userAgent:可获取浏览器用于HTTP请求的用户代理头的值
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { //处理移动端的业务逻辑 }else{ //处理电脑端的业务逻辑 } }
/正则表达式主体/修饰符(可选)
表达式 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。若无则返回**-1**。
// 不区分大小写 var index = 'Hello World!'.search(/world/i);
replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
var txt = 'Microsoft'.replace("Microsoft","World");
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false
var flag = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
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
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; } }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理