需求：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地址跳转移内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript Dom对象的操作
nuxt.js 多环境变量配置 |
