一、需求：

第一步：判断是网页端还是手机端

第二步：判断手机端，手机是横屏显示还是竖屏显示

二、解决方法：

监听网页端还是手机端

监听显示页面宽高变化

三、代码如下：

methods: {_isMobile() {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);return flag;},renderResize() {// 判断横竖屏let width = document.documentElement.clientWidth;let height = document.documentElement.clientHeight;if (width > height) {this.$router.replace("/landscape");} else {this.$router.replace("/vertical_screen");}},watch() {if (this._isMobile()) {// 监听 resize 方法this.renderResize();} else {this.$router.replace("/pc");}},},mounted() {window.addEventListener("resize", this.watch, false);// 如果显示页面宽高没有变化，判断网页端还是手机端this.watch();},beforeDestroy() {// 移除监听window.removeEventListener("resize", this.watch, false);},