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){  	//h5
				   		return 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
				}
			},
		]

})