脚本宝典收集整理的这篇文章主要介绍了vue中PC端地址跳转移动端的操作方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
需求：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; } }
到此这篇关于vue中PC端地址跳转移动端的文章就介绍到这了,更多相关vue地址跳转移内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
@H_558_126@ 您可能感兴趣的文章:以上是脚本宝典为你收集整理的vue中PC端地址跳转移动端的操作方法全部内容，希望文章能够帮你解决vue中PC端地址跳转移动端的操作方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。