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

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

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

App.vue

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 '));
}