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
}
},
]
})