前端：一个相同的链接在pc端和移动端打开不同的页面样式

最新推荐文章于 2022-10-14 10:19:05 发布

鲸虹之落

最新推荐文章于 2022-10-14 10:19:05 发布

阅读量1.7k

点赞数 4

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_43546677/article/details/123990168

版权

本文介绍了如何在前端通过window.navigator.userAgent来判断设备是PC端还是移动端，并给出了示例代码。判断逻辑可以放在main.js中作为全局处理，或者在特定路由跳转时使用。该方法对于实现不同设备的适配和路由跳转具有实际应用价值。

摘要由CSDN通过智能技术生成

对于如何区分pc端和移动端，其实我们只需要去判断你所用到的设备是电脑，安卓手机，苹果手机或者其他，在前端如何判断呢？

其实我们可以在项目中用window.navigator.userAgent就可以判断，我们可以定义一个变量去接收window.navigator.userAgent获取到的值，然后通过正则去判断是pc端或者移动端，从而跳转不同的路由。

那这个判断的逻辑应该写在哪儿呢？其实看你具体要用到哪儿了，如果是一个项目的基本地址的话，可以再main.js里面去判断；但是如果是项目某个页面跳转的话，那就在你跳转路由的时候去判断，以vue为例，vue跳转路由会用到this.$router.push()，我们可以通过判断是pc端还是移动端，从而跳转不同的地址。

例：