vue实现页面跳转到指定位置,vue跳转到指定位置

　　最近，边肖接到一个项目，说pc端和移动端是两个独立的项目。两个项目的内容基本相同，链接结合的方式也是有规律的。收到的需求是，当移动端访问pc端的URL连接时，会被重定向到移动端对应的页面。下面小编就来分享一下实现过程。让我们看一看。

　　需求：pc和移动是两个独立的项目，两个项目的内容基本相同，链接组合的方式有规律。当移动终端访问pc的URL连接时，接收到的请求是重定向到移动终端的相应页面。

　　实现这一要求的方式相当清楚。我的总体思路是在路由卫士处监控每一个进来的路由请求，分析该请求是否被移动终端访问。如果不是，则直接释放路由请求；如果要输入的路由路径被分析，则提取路径中的必要字段，并且该组合被称为新的移动链路。

　　涉及三个知识点：1、路由守护，2、客户端判断，3、常规文本提取。接下来我们将根据这几点分别进行讲解，并附上整个开发过程的源代码，供大家参考或批评。

1、路由守卫

　　To:要进入的路线

　　出发地：从哪条路线出发？

　　Next:路由控制参数，常用next(真)和next(假)

　　//所有路由请求都将通过这个路由保护，

　　router.beforeEach((收件人，发件人，下一个)={

　　//访问链接，例如：http://localhost/page/detail/iukgeq/108/9933/32279/8

　　//访问路径为：/page/detail/iukgeq/108/9933/32279/8

　　设toUrl=to.path

　　//此路由请求释放。

　　next()；

　　});

2、判断客户端

　　navigator.userAgent:您可以获取浏览器用于HTTP请求的用户代理头的值。

　　if(窗口类型！==未定义类型的window.navigator！==未定义){

　　if(/Android webOS iPhone iPod BlackBerry/I . test(navigator . user agent)){

　　//处理移动终端的业务逻辑

　　}否则{

　　//在计算机端处理业务逻辑

　　}

3、正则表达式（JS）

语法

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

修饰符

　　表示

　　形容

　　我

　　执行不区分大小写的匹配。

　　执行全局匹配(查找所有匹配，而不是在找到第一个后停止)。

　　执行多行匹配。

search()

　　search() 方法用于检索字符串中指定的子串，或者与正则表达式匹配的子串，并返回子串的起始位置。如果没有，返回**-1**。

　　//不区分大小写

　　var index=Hello World！。搜索(/world/I)；

replace()

　　replace() 方法用于将字符串中的某些字符替换为其他字符，或者替换与正则表达式匹配的子字符串。

　　var txt=微软。替换(微软，世界)；

test()

　　test()方法用于检测一个字符串是否匹配某个模式，如果字符串包含匹配的文本，则返回true，否则返回false。

　　var flag=/Android webOS iPhone iPod BlackBerry/I . test(navigator . user agent)；

exec()

　　exec()方法用于检索字符串中正则表达式的匹配项。

　　这个函数返回一个包含匹配结果的数组。如果没有找到匹配，返回值为null。

　　var matchParams=/(\d{1，3})\/(\d{4，6})\/(\d{4，6})/。执行(/page/detail/IUKGEQ/108/9933/32279/8 )

　　语法参考：https://www.runoob.com/regexp/regexp-syntax.html

4、源码：

　　导出默认值({ app })={

　　app.router.beforeEach((收件人、发件人、下一个)={

　　if(窗口类型！==未定义类型的window.navigator！==未定义){

　　如果(！/Android webOS iPhone iPod BlackBerry/I . test(navigator . user agent)){

　　//如果计算机访问，直接释放。

　　next()；

　　}否则{

　　var sCode=“”；

　　设toUrl=to.path

　　//标识获取方式1 .执行下列操作：从请求链接中获取

　　//你好页：1

　　//你好/iukget

　　//正则表达式提取连接中的六位大写字母的标识

　　设matcharr=tourl。match(\/[a-z]{ 6 })；

　　如果(代码= 代码==null 代码==未定义)匹配！=null)>

　　代码=匹配[1];

　　}

　　//标识获取方式第二：发起请求获取程式码

　　//你好/swpu

　　设matcharr 2=tourl。match(\/[a-z]{ 3，})；

　　如果(代码= 代码==null 代码==未定义)matar a2！=null)>

　　var param=match arr 2[1]；

　　getSInfo2参数。然后(RES==

　　如果(例如data.code)>

　　代码=日期代码：

　　//路由跳转

　　移动路由组合(tourl，代码);

　　}否则

　　//查不到程式码

　　下一步();//放行

　　}

　　})。catch(err=>

　　下一步();//放行

　　});

　　}

　　//上面两种种方式如果都无法取出代码，则直接放行

　　如果(代码= 代码==null 代码==未定义)>

　　下一步();

　　返回；

　　}否则

　　//路由跳转

　　移动路由组合(tourl，代码);

　　}

　　下一步();

　　})

　　}

　　/**

　　*移动端路由重组

　　* @ param 访问的网址(URL)哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟}图尔

　　* @ param[代码]代码

　　功能移动路线组合(旅游，代码)}

　　var wx home URL=conf。weixin /构建/索引。html？代码=代码 #/;

　　//toUrl吾曰你好/iukget形式，则直接跳转微信首页

　　如果(turl。长度=7)>

　　位置。href=wxhomeurl

　　}

　　//文章列表

　　if(toUrl.indexOf(/page/list/)！===1)}

　　设matchparams=tourl。match(\ \ d { 1，3 })\/\ \ d { 4，6 })；

　　让catId=匹配参数[2];

　　设versionId=匹配参数[1];//汝母编号号

　　var url=wxhomeurl 文章列表？catid= catid

　　location.href=url:

　　}

　　//文章详情

　　如果(tourl。的索引(/page/detail/)！===1)}

　　设matchparams=tourl。match(\ \ d { 1，3 })\/\ \ d { 4，6 })\/\ \ d { 4，6 })；

　　让infoId=匹配参数[3];