方法一:

index.html中head添加

<script type="text/javascript">
if(/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
navigator.userAgent)) {
window.location.href = "域名地址/mobile/index.html";
}
</script>

方法二:

app.vuehead中添加

<!--自动识别PC、移动-->
<script src="static/js/uaredirect.js" type="text/javascript"></script>
<!--设置移动端地址-->
<script type="text/javascript">uaredirect("https://chaopengjiankang.com/m/index.html");</script>

static文件夹中创建js文件夹,添加以下内容

function uaredirect(murl){
try {
if(document.getElementById("bdmark") != null){
return;
}
var urlhash = window.location.hash;
if (!urlhash.match("fromapp")){
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {
location.replace(murl);
}
}
} catch(err){}
}

vue 自动识别PC、移动端,并跳转到对应页面的更多相关文章

  1. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  2. js判断PC端 移动端 并跳转到对应页面

    一.PC端跳转到移动端 html页面: <script>var webroot="/",catid="{$catid}",murl="m/ ...

  3. 手机访问pc版网站自动跳转为手机版页面

    1.PC版首页</head>标签前加上以下脚本 <script src="/tools/browser_redirect.ashx"></script ...

  4. js判断是否是移动端自动跳转到wap页面代码

    <script type="text/javascript"> function is_mobile(){ var regex_match=/(nokia|iphone ...

  5. 每天一点产品思考(5):Web端链接跳转在当前页面刷新还是新标签页打开?

    一.与交互设计师的突然撕逼         今天阿白在验收产品的时候,在博客首页打开一篇博文,是在原先的页面进行刷新,而不是新开一个标签页打开.阿白让开发改成在新标签页中打开,但是开发说这是设计师设计 ...

  6. 判断pc端或移动端并跳转

    判断pc端或移动端并跳转 代码目录: index.html代码: <!DOCTYPE html> <html lang="en"> <head> ...

  7. JS实现PC端URL跳转到对应移动端URL

    在做移动端网站时,有时因技术问题或其他原因无法制作响应式版面,而移动端页面只能放到子目录下,但是手机端通过搜索引擎进入网站电脑端子页面,无法匹配到移动端页面,使得用户体验很不好,即影响排名也影响转化. ...

  8. 判断是pc端还是手机端,并跳转到相应页面

    <!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var user ...

  9. 移动端app跳转百度地图

    http://lbsyun.baidu.com/index.php?title=uri/guide/helloworld(百度地图调起URI API)开发者只需按照接口规范构造一条标准的URI,便可在 ...

随机推荐

  1. 2018-2019-2 20165212《网络对抗技术》Exp2 后门原理与实践

    2018-2019-2 20165212<网络对抗技术>Exp2 后门原理与实践 1.实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作 ...

  2. Zookeeper的下载、安装和启动

    一.下载Zookeeper 版本 zookeeper-3.4.13 下载地址:https://archive.apache.org/dist/zookeeper/ 解压后放在/usr/local/zo ...

  3. Nginx反向代理tomcat返回400 bad request

    Nginx反向代理tomcat返回400 bad request nginx 版本1.12, tomcat版本 9.06 最近用Nginx做反向代理tomcat,实现前后端分离,nginx 将请求代理 ...

  4. java工程师-面试知识点总结

    目录(转载) [x] 一.Java基础(语言.集合框架.OOP.设计模式等) [x] 二.Java高级(JavaEE.框架.服务器.工具等) [x] 三.多线程和并发 [x] 四.Java虚拟机 [x ...

  5. win7文件夹带锁标志如何去除?win7去除文件夹带锁标志的方法

    win7文件夹带锁标志如何去除?win7去除文件夹带锁标志的方法 http://www.xitongcheng.com/jiaocheng/win7_article_30333.html 具体方法如下 ...

  6. Struts2 <s:select >标签的使用

    select 取值session中的内容 <s:select name="meal.mealseries.seriesid" list="#session.meal ...

  7. wordpress评论回复自动发邮件的功能

    A.插件流,可以说WP强大的插件功能的确能省事不少. 插件的办法一般是两步:第一实现成功发邮件,第二时间评论自动回复,这就需要用到两个插件,一个是Configure SMTP,一个是Mail To C ...

  8. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  9. linux环境下载和安装scala

    Linux下安装Scala和Windows下安装类似,步骤如下: 1.首先访问下载链接:http://www.scala-lang.org/download/默认这里下载的是Windows版本,这时点 ...

  10. Rabbitmq(6) 主题模式

    * 匹配1个 # 匹配所有 发送者: package com.aynu.bootamqp.service; import com.aynu.bootamqp.commons.utils.Amqp; i ...