Realize a project compatible with mobile and computer in vue
This solution is not a responsive solution,Instead, the same project (same ip and port) displays different pages on the mobile terminal and the PC terminal, considering that the function of the mobile terminal may only be a simplification of the PC terminal, so the interface of the mobile terminal is rewritten (maybe only the adjustment of the style, or the simplification of the function)
First of all, only the routing of the mobile terminal and the routing of the PC terminal are different, as follows, the routing of the mobile terminal and the PC terminal are different
From the above routing, we can see that if the access to ip:port defaults to the PC-side route, then how to make the mobile terminal access the ip:port to enter the route under /mobile, only need to be in the
projectapp.vueIn the mounted() hook function, make the following judgments and perform routing jumps
mounted() {
// 判断是否是手机端
if(this._isMobile()){
//手机端
this.$router.replace("/mobile")
}
},
methods:{
// 判断是否是移动端
_isMobile(){
let flag = navigator.userAgent.match(
/(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
);
return flag;
}
}
At this time, when using the mobile terminal to access, navigator.userAgent.match will judge, and then directly jump to the /mobile route on the mobile terminal