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

柚子233

于 2019-09-30 14:03:35 发布

阅读量5.6k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_37816525/article/details/101767058

版权

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.userAg