vue如何在一个工程里显示pc和手机端（适用多页面复杂项目）

vue通过设备判断方法来切换加载pc或h5的路由

一个工程做h5和pc切换展示小型项目适用，大型项目还是建议做两个工程，否则后期项目扩展，工程越来越大，会影响页面加载，
关于vue项目的优化，打包后包太大可以看我另一篇博文
vue项目优化，cdn和gz压缩

App.vue

<template>
	<div id="app">
		<router-view></router-view>
	</div>
</template>	
<script>
import store from '@/store'
import Router from 'vue-router'


mounted(){
		if(this.showBol()){
		
			console.log('pc')
			window.addEventListener('load',function(){
				if(store.state.router ==''){//刷新为当前页面
					Router.replace('/');
				}
			})
		}else{
			console.log('h5');
			Router.replace('/hIndex');
		}
	

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

</script>

router.js

const pcLatout = r =>require.ensuer([],() => r(require('./components/pcIndex/layout/layout.vue')),'pcLayout');
const h5Latout = r =>require.ensuer([],() => r(require('./components/h5Index/layout/layout.vue')),'h5Layout');
export defaule new Router({
	routes:[
	//pc路由
		{
			path:'/',
			component:pcLayout,
			children:[
				{
					path:"/",
					name:"pIndex",
					component:pIndex,
				},
				{
					path:"/papply",
					name:"papply",
					component:papply,
				},
				{
					path:"/pmerindex",
					name:"pmerindex",
					component:pmerindex,
				},
				{
					path:"/puserindex",
					name:"puserindex",
					component:puserindex,
					redirect:'puserInfo',
					children:[
							{
								path:"/puserInfo",
								name:"puserInfo",
								component:puserInfo,
								beforeEnter:(to,from,next)=>{
									if(store.state.token !== ''){
										console.log('用户已登录');
										next();
									}else{
									console.log('用户未登录');
									next({path:'/',query:{Rurl:to.fullPath}})
									}
								}
							},
					]
				},
				
			]
		},
		//h5路由
		{
			path:"/hindex",
			name:"hIndex",
			component:h5Layout,
			childrern:[
				{
					path:"/hIndex",
					name:"hIndex",
					component:hIndex
				},
				{
					path:"/happly",
					name:"happly",
					component:happly
				},
				{
					path:"/hmerchant",
					name:"hmerchant",
					component:hmerchant
				},
				{
					path:"/puserindex",
					name:"puserindex",
					component:puserindex,
					redirect:'puserInfo',
					children:[
							{
								path:"/puserInfo",
								name:"puserInfo",
								component:puserInfo,
								beforeEnter:(to,from,next)=>{
									if(store.state.token !== ''){
										console.log('用户已登录');
										next();
									}else{
									console.log('用户未登录');
									next({path:'/hindex',query:{Rurl:to.fullPath}})
									}
								}
							},
					]
				},
				
				
			]
		}
	]
})

store

const state = {
	router:'',
	token:''
}
const mutations = {
	setToken(state,value){
		state.token = value;
		sessionStorage.token = value
		
	},
	deleteToken(state){
		state.token = "";
		sessionStorage.removeItem('token')
	},
	setRouter(state,value){
		state.router= value;
	},
	deleteRouter(state){
		state.router= "";
	}
}

header.vue

watch:{
	$route(to,from){
		let router = to.path;
		sessionStorage.setItem('router',router);
		this.$store.commit('setRouter',sessionStorage.getItem('router'))
	}
},
mounter(){
	let router = this.$route.path;
	sessionStirage.setItem('router ',router);
	this.$store.commit('setRouter',sessionStirage.getItem('router '));
}