vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）

本文只适用于单页面项目，多页面项目请查看我另一篇博文

vue如何在一个工程里显示pc和手机端（适用多页面复杂项目）
https://blog.csdn.net/qq_37816525/article/details/101767058

vue如何在一个工程里判断h5还是pc

app.vue

<template v-if='showBol()'><router-view />
</template><template v-else><!--这里的name不是命名路由时的name，是components对象里的key--><router-view name='h5Index' />
</template>methodes:{showBol(){var browser={versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核presto: u.indexOf('Presto') > -1, //opera内核webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器iPad: u.indexOf('iPad') > -1, //是否iPad  webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部weixin: u.indexOf('MicroMessenger') > -1, //是否微信 qq: u.match(/\sQQ/i) == " qq" //是否QQ};}(),language:(navigator.browserLanguage || navigator.language).toLowerCase()} if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){      //h5return fals}else{return true}}
}

router.js

import Vue form 'vue'
import Router from 'vue-router'
const pcIndex= r => require.ensure([],()=>r(require('.components/pcIndex/index.vue')).'pcIndex');
const h5Index= r => require.ensure([],()=>r(require('.components/h5Index/index.vue')).'h5Index');
Vue.use(Router);
export default new Router({routes:[{path:'/',name:'pcIndex',components:{defaule:pcIndex,//默认显示pc'h5Index':h5Index}},]})

vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）相关推荐

python 服务端，判断H5和PC的方法
python服务端,判断H5和PC class Common(object):def checkMobile(request):""":param request::re ...
Matlab 一张图绘制在一个figure里，多张图绘制在一个figure里，和多张图分别绘制在一个figure里（多重子图）讲解及代码
matlab的绘图可以采用直角坐标系.对数坐标系和极坐标等形式.数据点也可用向量或矩阵形式给出,类型可以是实型或复型. 一张图绘制在一个figure里: 以实例和代码讲解:在不同图形窗口下分别绘制出y ...
Altium Designer同一个工程里不同原理图导入到不同的PCB
问题: 在用Altium Designer进行PCB工程设计时,有时一个工程里可能不止一块PCB,比如,一个设备里有主板和扩展板或者按键板等等,这时就需要在一个工程里添加多个PCB文件.如图: 我们 ...
app里面的h5的定位方式（夜神模拟器篇）
一.首先确定模拟器是否与电脑连接输入命令adb connect 127.0.0.1:62001(如图所示) 输入adb devices查看是否连接成功二.开发在打包代码时,让开发人员开启webvi ...
(实战)Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5
作者:围的围 https://juejin.im/post/5dc81428e51d4523632ee793 前言想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇 ...
element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
最适合散户最有效的成长型价值投资（一篇博文成就股票投资高手）
成长性: 净利润同比增长率创上市新高净利润连续三年增长稳定性利润增长稳定性高稳定的自由现金流估值增长市盈率PEG合理或低估强度指数股价创历史新高股票强度和股价强度在70以上股票强度 ...
信安小白，一篇博文讲明白上传漏洞——获得shop靶机的Webshell
实验环境:Win7 上传漏洞--获得shop靶机的Webshell 系列博文前言 Webshell--脚本攻击工具 1. Webshell 工具举例 2. 如何获得Webshell 3. 上传检测 ...
【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式，这篇博文很有可能是你的启蒙文
前言本片博文主要面向于还没接触过web开发的萌新,以及想知道整体流程并且完成建站的萌新:如果你是个大佬,就没必要看下去了. 本篇博文没有难啃的骨头,请各位萌新放心食用. 本篇博文采用通俗易懂的方式讲 ...

vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）

本文只适用于单页面项目，多页面项目请查看我另一篇博文

vue如何在一个工程里判断h5还是pc，（利用在一个页面显示不同router-view内容原理，本文只使用于单页面项目，多页面项目请查看我另一篇博文）相关推荐

最新文章

热门文章