vue中PC端地址跳转移动端的操作方法
时间：2023-01-27 10:13:40|栏目：vue|点击： 次
需求：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
下一篇：关于Vue的 watch、computed和methods的区别汇总
本文标题：vue中PC端地址跳转移动端的操作方法
本文地址：http://www.codeinn.net/misctech/224566.html
